@dnb/eufemia 10.6.0 → 10.7.0

package/cjs/components/form-label/style/dnb-form-label.css

@@ -25,7 +25,6 @@
 .dnb-form-label[for]:not([disabled]) {
   -webkit-user-select: none;
           user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

package/cjs/components/form-label/style/dnb-form-label.min.css

@@ -1 +1 @@
-.dnb-form-label{color:inherit;display:inline-block;font-size:var(--font-size-basis);margin-right:1rem;padding:0;text-align:left;vertical-align:baseline;white-space:pre-wrap;width:auto;word-break:normal}.dnb-form-label--vertical{display:block;margin-bottom:.5rem;margin-right:0}.dnb-form-label[for]:not([disabled]){cursor:pointer;-webkit-user-select:none;user-select:none}.dnb-form-label[disabled]{cursor:not-allowed}legend.dnb-form-label{display:inline-block}
+.dnb-form-label{color:inherit;display:inline-block;font-size:var(--font-size-basis);margin-right:1rem;padding:0;text-align:left;vertical-align:baseline;white-space:pre-wrap;width:auto;word-break:normal}.dnb-form-label--vertical{display:block;margin-bottom:.5rem;margin-right:0}.dnb-form-label[for]:not([disabled]){-webkit-user-select:none;user-select:none}.dnb-form-label[disabled]{cursor:not-allowed}legend.dnb-form-label{display:inline-block}

package/cjs/components/form-label/style/dnb-form-label.scss

@@ -33,7 +33,6 @@
 
   &[for]:not([disabled]) {
     user-select: none; // Safari / Touch fix
-    cursor: pointer;
   }
 
   &[disabled] {

package/cjs/components/form-label/style/themes/dnb-form-label-theme-sbanken.css

@@ -0,0 +1,10 @@
+/*
+ * FormLabel theme
+ *
+ */
+.dnb-form-label {
+  color: var(--sb-color-text);
+}
+.dnb-checkbox .dnb-form-label[for]:not([disabled]), .dnb-switch .dnb-form-label[for]:not([disabled]), .dnb-radio .dnb-form-label[for]:not([disabled]) {
+  cursor: pointer;
+}

package/cjs/components/form-label/style/themes/dnb-form-label-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-form-label{color:var(--sb-color-text)}.dnb-checkbox .dnb-form-label[for]:not([disabled]),.dnb-radio .dnb-form-label[for]:not([disabled]),.dnb-switch .dnb-form-label[for]:not([disabled]){cursor:pointer}

package/cjs/components/form-label/style/themes/dnb-form-label-theme-sbanken.scss

@@ -0,0 +1,16 @@
+/*
+ * FormLabel theme
+ *
+ */
+
+.dnb-form-label {
+  color: var(--sb-color-text);
+
+  .dnb-checkbox &,
+  .dnb-switch &,
+  .dnb-radio & {
+    &[for]:not([disabled]) {
+      cursor: pointer;
+    }
+  }
+}

package/cjs/components/form-label/style/themes/dnb-form-label-theme-ui.css

@@ -5,6 +5,9 @@
 .dnb-form-label {
   color: var(--color-black-80);
 }
+.dnb-form-label[for]:not([disabled]) {
+  cursor: pointer;
+}
 .dnb-form-label[for]:not([disabled]):hover {
   color: var(--color-sea-green);
 }

package/cjs/components/form-label/style/themes/dnb-form-label-theme-ui.min.css

@@ -1 +1 @@
-.dnb-form-label{color:var(--color-black-80)}.dnb-form-label[for]:not([disabled]):hover{color:var(--color-sea-green)}
+.dnb-form-label{color:var(--color-black-80)}.dnb-form-label[for]:not([disabled]){cursor:pointer}.dnb-form-label[for]:not([disabled]):hover{color:var(--color-sea-green)}

package/cjs/components/form-label/style/themes/dnb-form-label-theme-ui.scss

@@ -6,7 +6,11 @@
 .dnb-form-label {
   color: var(--color-black-80);
 
-  &[for]:not([disabled]):hover {
-    color: var(--color-sea-green);
+  &[for]:not([disabled]) {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-sea-green);
+    }
   }
 }

package/cjs/components/form-row/style/themes/dnb-form-row-theme-sbanken.css

@@ -0,0 +1,4 @@
+/*
+ * FormRow theme
+ *
+ */

package/cjs/components/form-row/style/themes/dnb-form-row-theme-sbanken.scss

@@ -0,0 +1,4 @@
+/*
+ * FormRow theme
+ *
+ */

package/cjs/components/input/style/themes/dnb-input-theme-sbanken.css

@@ -31,6 +31,7 @@
 }
 .dnb-input__submit-button__button {
   --button-secondary-color: var(--sb-color-violet);
+  --button-secondary-color--active: var(--sb-color-violet);
 }
 .dnb-input__placeholder {
   color: var(--sb-color-gray-dark-3);
@@ -70,24 +71,6 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
   --input-border-color: var(--input-border-color--hover);
   --input-border-width: 0.125rem;
 }
-.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button {
-  transition: border-radius 0.25s ease-out;
-  background-color: transparent;
-  box-shadow: none;
-}
-.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:hover, .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:active {
-  border: var(--input-button-border-width) solid var(--input-button-border-color);
-  border-left: none;
-  padding-left: var(--input-button-border-width);
-}
-.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.focus-visible {
-  border: none;
-  padding-left: none;
-}
-.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:focus-visible {
-  border: none;
-  padding-left: none;
-}
 .dnb-input:not([data-input-state=disabled]).dnb-input__status--error {
   --input-border-color: var(--sb-color-red);
   --input-color--default: var(--sb-color-red);
@@ -98,7 +81,24 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
 }
 .dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button {
   --button-secondary-background--hover: var(--sb-color-red);
+  --button-secondary-color--hover: var(--sb-color-white);
+  --button-secondary-color--active: var(--sb-color-red);
 }
-.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button:hover:not(:active) {
-  --button-secondary-color: var(--sb-color-white);
+.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible) {
+  background-color: transparent;
+  box-shadow: none;
+}
+.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible) {
+  background-color: transparent;
+  box-shadow: none;
+}
+.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):hover, .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):active {
+  border: var(--input-button-border-width) solid var(--input-button-border-color);
+  border-left: none;
+  padding-left: var(--input-button-border-width);
+}
+.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover, .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):active {
+  border: var(--input-button-border-width) solid var(--input-button-border-color);
+  border-left: none;
+  padding-left: var(--input-button-border-width);
 }

package/cjs/components/input/style/themes/dnb-input-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-input{--input-height:2.5rem;--input-button-border-color:var(--input-border-color);--input-button-border-width:var(--input-border-width);--input-border-radius:0.5rem;--input-border-width:0.0625rem;--input-color:var(--input-color--default);--input-color--default:var(--sb-color-text);--input-color--active:var(--sb-color-text);--input-border-color:var(--sb-color-gray-dark-2);--input-border-color--hover:var(--sb-color-violet);--input-border-color--active:var(--sb-color-violet);--input-border-color--focus:var(--focus-ring-color)}.dnb-input__shell{--border-color:var(--input-border-color);--border-width:var(--input-border-width);background-color:var(--color-white);border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--input-color);transition:border-radius .25s ease-out}.dnb-input__submit-button__button{--button-secondary-color:var(--sb-color-violet)}.dnb-input__placeholder{color:var(--sb-color-gray-dark-3)}.dnb-input[data-input-state=disabled]{--input-border-color:var(--sb-color-gray)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentcolor;background-color:var(--sb-color-gray-light)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder{color:var(--sb-color-gray-dark-2)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-color:var(--input-color--active);--input-border-radius:1.5rem;--input-border-color:var(--input-border-color--active)}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-button-border-color:var(--input-border-color--focus);--input-button-border-width:var(--focus-ring-width)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{outline:none}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{--border-color:var(--input-border-color--focus);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-input:not([data-input-state=disabled]) .dnb-form-label:hover+.dnb-input__inner .dnb-input__shell,.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover{--input-border-color:var(--input-border-color--hover);--input-border-width:0.125rem}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button{background-color:transparent;box-shadow:none;transition:border-radius .25s ease-out}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:active,.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:hover{border:var(--input-button-border-width) solid var(--input-button-border-color);border-left:none;padding-left:var(--input-button-border-width)}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.focus-visible{border:none;padding-left:none}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:focus-visible{border:none;padding-left:none}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error{--input-border-color:var(--sb-color-red);--input-color--default:var(--sb-color-red);--input-color--active:var(--sb-color-text);--input-border-color--hover:var(--sb-color-red);--input-border-color--active:var(--sb-color-red);--input-border-color--focus:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button{--button-secondary-background--hover:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button:hover:not(:active){--button-secondary-color:var(--sb-color-white)}
+.dnb-input{--input-height:2.5rem;--input-button-border-color:var(--input-border-color);--input-button-border-width:var(--input-border-width);--input-border-radius:0.5rem;--input-border-width:0.0625rem;--input-color:var(--input-color--default);--input-color--default:var(--sb-color-text);--input-color--active:var(--sb-color-text);--input-border-color:var(--sb-color-gray-dark-2);--input-border-color--hover:var(--sb-color-violet);--input-border-color--active:var(--sb-color-violet);--input-border-color--focus:var(--focus-ring-color)}.dnb-input__shell{--border-color:var(--input-border-color);--border-width:var(--input-border-width);background-color:var(--color-white);border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--input-color);transition:border-radius .25s ease-out}.dnb-input__submit-button__button{--button-secondary-color:var(--sb-color-violet);--button-secondary-color--active:var(--sb-color-violet)}.dnb-input__placeholder{color:var(--sb-color-gray-dark-3)}.dnb-input[data-input-state=disabled]{--input-border-color:var(--sb-color-gray)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentcolor;background-color:var(--sb-color-gray-light)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder{color:var(--sb-color-gray-dark-2)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-color:var(--input-color--active);--input-border-radius:1.5rem;--input-border-color:var(--input-border-color--active)}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-button-border-color:var(--input-border-color--focus);--input-button-border-width:var(--focus-ring-width)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{outline:none}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{--border-color:var(--input-border-color--focus);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-input:not([data-input-state=disabled]) .dnb-form-label:hover+.dnb-input__inner .dnb-input__shell,.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover{--input-border-color:var(--input-border-color--hover);--input-border-width:0.125rem}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error{--input-border-color:var(--sb-color-red);--input-color--default:var(--sb-color-red);--input-color--active:var(--sb-color-text);--input-border-color--hover:var(--sb-color-red);--input-border-color--active:var(--sb-color-red);--input-border-color--focus:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button{--button-secondary-background--hover:var(--sb-color-red);--button-secondary-color--hover:var(--sb-color-white);--button-secondary-color--active:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible){background-color:transparent;box-shadow:none}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible){background-color:transparent;box-shadow:none}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):active,.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):hover{border:var(--input-button-border-width) solid var(--input-button-border-color);border-left:none;padding-left:var(--input-button-border-width)}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):active,.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover{border:var(--input-button-border-width) solid var(--input-button-border-color);border-left:none;padding-left:var(--input-button-border-width)}

package/cjs/components/input/style/themes/dnb-input-theme-sbanken.scss

@@ -37,6 +37,7 @@
 
   &__submit-button__button {
     --button-secondary-color: var(--sb-color-violet);
+    --button-secondary-color--active: var(--sb-color-violet);
   }
 
   &__placeholder {
@@ -86,26 +87,6 @@
       --input-border-width: 0.125rem;
     }
 
-    // Button
-    .dnb-input__submit-button__button {
-      transition: border-radius 0.25s ease-out;
-      background-color: transparent;
-      box-shadow: none;
-
-      &:hover,
-      &:active {
-        border: var(--input-button-border-width) solid
-          var(--input-button-border-color);
-        border-left: none;
-        padding-left: var(--input-button-border-width);
-      }
-
-      &:focus-visible {
-        border: none;
-        padding-left: none;
-      }
-    }
-
     &.dnb-input__status--error {
       --input-border-color: var(--sb-color-red);
       --input-color--default: var(--sb-color-red);
@@ -116,10 +97,21 @@
 
       .dnb-input__submit-button__button {
         --button-secondary-background--hover: var(--sb-color-red);
+        --button-secondary-color--hover: var(--sb-color-white);
+        --button-secondary-color--active: var(--sb-color-red);
+      }
+    }
+
+    .dnb-input__submit-button__button:not(:focus-visible) {
+      background-color: transparent;
+      box-shadow: none;
 
-        &:hover:not(:active) {
-          --button-secondary-color: var(--sb-color-white);
-        }
+      &:hover,
+      &:active {
+        border: var(--input-button-border-width) solid
+          var(--input-button-border-color);
+        border-left: none;
+        padding-left: var(--input-button-border-width);
       }
     }
   }

package/cjs/components/pagination/style/dnb-pagination.css

@@ -14,6 +14,13 @@
   flex-wrap: wrap;
   align-items: center;
 }
+.dnb-pagination__page, .dnb-pagination__loadbar {
+  min-height: 6rem;
+}
+.dnb-pagination__bar {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .dnb-pagination--left .dnb-pagination__bar {
   justify-content: flex-start;
 }
@@ -59,12 +66,14 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  min-height: inherit;
 }
 .dnb-pagination__indicator__inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  animation: show-page 300ms ease-out forwards;
 }
 .dnb-pagination__dots {
   align-self: flex-end;
@@ -88,4 +97,15 @@
 }
 .dnb-pagination__bar__skip .dnb-button:first-of-type {
   margin-right: 1.5rem;
+}
+
+@keyframes show-page {
+  from {
+    transform: translate3d(0, -8px, 0);
+    opacity: 0.1;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }

package/cjs/components/pagination/style/dnb-pagination.min.css

@@ -1 +1 @@
-.dnb-pagination{display:flex;flex-direction:column-reverse}.dnb-pagination__bar,.dnb-pagination__bar__inner,.dnb-pagination__loadbar{align-items:center;display:flex;flex-wrap:wrap}.dnb-pagination--left .dnb-pagination__bar{justify-content:flex-start}.dnb-pagination--center .dnb-pagination__bar{justify-content:center}@media screen and (max-width:40em){.dnb-pagination--center .dnb-pagination__bar{justify-content:flex-start}}.dnb-pagination--right .dnb-pagination__bar{justify-content:flex-end}.dnb-pagination__bar__wrapper{display:flex;flex-flow:column-reverse wrap}.dnb-pagination--center .dnb-pagination__bar__wrapper{align-items:center}.dnb-pagination--right .dnb-pagination__bar__wrapper{align-items:flex-end}.dnb-pagination__bar__inner{grid-gap:.5rem;gap:.5rem}.dnb-pagination__button{max-width:3.5rem}.dnb-pagination__button--large-number{max-width:unset}.dnb-pagination__loadbar{align-items:center;cursor:default;display:flex;justify-content:center}.dnb-pagination__indicator{cursor:default;display:flex;flex-direction:column;justify-content:center}.dnb-pagination__indicator__inner{align-items:center;display:flex;flex-direction:column;justify-content:center}.dnb-pagination__dots{align-self:flex-end}.dnb-pagination__marker{height:1px;margin:-1px 0 0 -1px;overflow:hidden;pointer-events:none;position:relative;width:1px}.dnb-pagination__marker td,.dnb-pagination__marker__inner{height:1px;opacity:0;padding:0!important;width:1px}.dnb-pagination__bar__skip{margin-top:.5rem}.dnb-pagination__bar__skip .dnb-button:first-of-type{margin-right:1.5rem}
+.dnb-pagination{display:flex;flex-direction:column-reverse}.dnb-pagination__bar,.dnb-pagination__bar__inner,.dnb-pagination__loadbar{align-items:center;display:flex;flex-wrap:wrap}.dnb-pagination__loadbar,.dnb-pagination__page{min-height:6rem}.dnb-pagination__bar{margin-bottom:1rem;margin-top:1rem}.dnb-pagination--left .dnb-pagination__bar{justify-content:flex-start}.dnb-pagination--center .dnb-pagination__bar{justify-content:center}@media screen and (max-width:40em){.dnb-pagination--center .dnb-pagination__bar{justify-content:flex-start}}.dnb-pagination--right .dnb-pagination__bar{justify-content:flex-end}.dnb-pagination__bar__wrapper{display:flex;flex-flow:column-reverse wrap}.dnb-pagination--center .dnb-pagination__bar__wrapper{align-items:center}.dnb-pagination--right .dnb-pagination__bar__wrapper{align-items:flex-end}.dnb-pagination__bar__inner{grid-gap:.5rem;gap:.5rem}.dnb-pagination__button{max-width:3.5rem}.dnb-pagination__button--large-number{max-width:unset}.dnb-pagination__loadbar{align-items:center;cursor:default;display:flex;justify-content:center}.dnb-pagination__indicator{cursor:default;display:flex;flex-direction:column;justify-content:center;min-height:inherit}.dnb-pagination__indicator__inner{align-items:center;animation:show-page .3s ease-out forwards;display:flex;flex-direction:column;justify-content:center}.dnb-pagination__dots{align-self:flex-end}.dnb-pagination__marker{height:1px;margin:-1px 0 0 -1px;overflow:hidden;pointer-events:none;position:relative;width:1px}.dnb-pagination__marker td,.dnb-pagination__marker__inner{height:1px;opacity:0;padding:0!important;width:1px}.dnb-pagination__bar__skip{margin-top:.5rem}.dnb-pagination__bar__skip .dnb-button:first-of-type{margin-right:1.5rem}@keyframes show-page{0%{opacity:.1;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translateZ(0)}}

package/cjs/components/pagination/style/dnb-pagination.scss

@@ -17,6 +17,16 @@
     align-items: center;
   }
 
+  &__page,
+  &__loadbar {
+    min-height: 6rem;
+  }
+
+  &__bar {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
   &--left &__bar {
     justify-content: flex-start;
   }
@@ -70,12 +80,14 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    min-height: inherit;
 
     &__inner {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
+      animation: show-page 300ms ease-out forwards;
     }
   }
 
@@ -112,3 +124,15 @@
     margin-right: 1.5rem;
   }
 }
+
+@keyframes show-page {
+  from {
+    transform: translate3d(0, -8px, 0);
+    opacity: 0.1;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}

package/cjs/components/pagination/style/themes/dnb-pagination-theme-sbanken.css

@@ -0,0 +1,26 @@
+/*
+* Pagination theme
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-pagination__bar__skip .dnb-button--tertiary:not([disabled]) .dnb-button__text {
+  color: var(--sb-color-text);
+}
+.dnb-core-style .dnb-pagination__button.dnb-button, .dnb-pagination__button.dnb-button {
+  --button-primary-color: var(--sb-color-white);
+  --button-primary-color--active: var(--sb-color-white);
+  --button-primary-background: var(--sb-color-violet);
+  --button-primary-background--hover: var(--sb-color-violet-light-4);
+  --button-primary-background--active: var(--sb-color-violet);
+  --button-primary-border--hover: var(--sb-color-violet);
+  --button-secondary-background--hover: var(--sb-color-white);
+  --button-secondary-border--default: var(--sb-color-gray);
+  --button-secondary-border--hover: var(--sb-color-violet);
+  --button-secondary-border--active: var(--sb-color-gray);
+}
+
+.dnb-pagination__dots {
+  color: var(--sb-color-text);
+}

package/cjs/components/pagination/style/themes/dnb-pagination-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-pagination__bar__skip .dnb-button--tertiary:not([disabled]) .dnb-button__text{color:var(--sb-color-text)}.dnb-core-style .dnb-pagination__button.dnb-button,.dnb-pagination__button.dnb-button{--button-primary-color:var(--sb-color-white);--button-primary-color--active:var(--sb-color-white);--button-primary-background:var(--sb-color-violet);--button-primary-background--hover:var(--sb-color-violet-light-4);--button-primary-background--active:var(--sb-color-violet);--button-primary-border--hover:var(--sb-color-violet);--button-secondary-background--hover:var(--sb-color-white);--button-secondary-border--default:var(--sb-color-gray);--button-secondary-border--hover:var(--sb-color-violet);--button-secondary-border--active:var(--sb-color-gray)}.dnb-pagination__dots{color:var(--sb-color-text)}

package/cjs/components/pagination/style/themes/dnb-pagination-theme-sbanken.scss

@@ -0,0 +1,35 @@
+/*
+* Pagination theme
+*
+*/
+
+@import '../../../../style/core/utilities.scss';
+
+.dnb-pagination {
+  &__bar__skip {
+    // button tertiary
+    .dnb-button--tertiary:not([disabled]) .dnb-button__text {
+      color: var(--sb-color-text);
+    }
+  }
+  // active/checked - like toggle-button
+  @at-root .dnb-core-style &__button.dnb-button,
+    &__button.dnb-button {
+    // button primary
+    --button-primary-color: var(--sb-color-white);
+    --button-primary-color--active: var(--sb-color-white);
+    --button-primary-background: var(--sb-color-violet);
+    --button-primary-background--hover: var(--sb-color-violet-light-4);
+    --button-primary-background--active: var(--sb-color-violet);
+    --button-primary-border--hover: var(--sb-color-violet);
+    // button secondary
+    --button-secondary-background--hover: var(--sb-color-white);
+    --button-secondary-border--default: var(--sb-color-gray);
+    --button-secondary-border--hover: var(--sb-color-violet);
+    --button-secondary-border--active: var(--sb-color-gray);
+  }
+
+  &__dots {
+    color: var(--sb-color-text);
+  }
+}

package/cjs/components/pagination/style/themes/dnb-pagination-theme-ui.css

@@ -5,19 +5,6 @@
 /*
  * Utilities
  */
-.dnb-pagination__page, .dnb-pagination__loadbar {
-  min-height: 6rem;
-}
-.dnb-pagination__bar {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-.dnb-pagination__indicator {
-  min-height: inherit;
-}
-.dnb-pagination__indicator__inner {
-  animation: show-page 300ms ease-out forwards;
-}
 .dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]), .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]) {
   background-color: var(--color-emerald-green);
   color: var(--color-mint-green);
@@ -29,15 +16,4 @@ html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button
 
 .dnb-pagination__dots {
   color: var(--color-black-55);
-}
-
-@keyframes show-page {
-  from {
-    transform: translate3d(0, -8px, 0);
-    opacity: 0.1;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
 }

package/cjs/components/pagination/style/themes/dnb-pagination-theme-ui.min.css

@@ -1 +1 @@
-.dnb-pagination__loadbar,.dnb-pagination__page{min-height:6rem}.dnb-pagination__bar{margin-bottom:1rem;margin-top:1rem}.dnb-pagination__indicator{min-height:inherit}.dnb-pagination__indicator__inner{animation:show-page .3s ease-out forwards}.dnb-core-style .dnb-pagination__button.dnb-button--primary,.dnb-core-style .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]),.dnb-pagination__button.dnb-button--primary,.dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]){background-color:var(--color-emerald-green);color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green)}.dnb-pagination__dots{color:var(--color-black-55)}@keyframes show-page{0%{opacity:.1;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translateZ(0)}}
+.dnb-core-style .dnb-pagination__button.dnb-button--primary,.dnb-core-style .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]),.dnb-pagination__button.dnb-button--primary,.dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]){background-color:var(--color-emerald-green);color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green)}.dnb-pagination__dots{color:var(--color-black-55)}

package/cjs/components/pagination/style/themes/dnb-pagination-theme-ui.scss

@@ -6,24 +6,6 @@
 @import '../../../../style/core/utilities.scss';
 
 .dnb-pagination {
-  &__page,
-  &__loadbar {
-    min-height: 6rem;
-  }
-
-  &__bar {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  &__indicator {
-    min-height: inherit;
-
-    &__inner {
-      animation: show-page 300ms ease-out forwards;
-    }
-  }
-
   // active/checked - like toggle-button
   @at-root .dnb-core-style &__button.dnb-button--primary,
     &__button.dnb-button--primary {
@@ -44,15 +26,3 @@
     color: var(--color-black-55);
   }
 }
-
-@keyframes show-page {
-  from {
-    transform: translate3d(0, -8px, 0);
-    opacity: 0.1;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}

package/cjs/components/section/Section.d.ts

@@ -4,9 +4,14 @@
  */
 import React from 'react';
 import type { DynamicElement, SpacingProps } from '../../shared/types';
+export type SectionVariants = 'error' | 'info' | 'warning' | 'success';
 export type SectionStyleTypes = 'divider' | 'white' | 'transparent' | 'lavender' | 'pistachio' | 'emerald-green' | 'sea-green' | 'fire-red' | 'fire-red-8' | 'sand-yellow' | 'black-3' | 'mint-green' | 'mint-green-12';
 export type SectionSpacing = boolean | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
 export type SectionProps = {
+    /**
+     * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop
+     */
+    variant?: SectionVariants | string;
     /**
      * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.
      */

package/cjs/components/section/Section.js

@@ -9,7 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _componentHelper = require("../../shared/component-helper");
 var _SpacingHelper = require("../space/SpacingHelper");
-const _excluded = ["element", "style_type", "spacing", "inner_ref", "className", "children"];
+const _excluded = ["element", "variant", "style_type", "spacing", "inner_ref", "className", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -26,6 +26,7 @@ function Section(localProps) {
   const props = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, context.Section);
   const {
       element,
+      variant,
       style_type,
       spacing,
       inner_ref,
@@ -34,7 +35,7 @@ function Section(localProps) {
     } = props,
     attributes = _objectWithoutProperties(props, _excluded);
   const params = _objectSpread({
-    className: (0, _classnames.default)(`dnb-section dnb-section--${style_type || 'mint-green-12'}`, (0, _SpacingHelper.createSpacingClasses)(props), className, spacing && `dnb-section--spacing-${(0, _componentHelper.isTrue)(spacing) ? 'large' : spacing}`)
+    className: (0, _classnames.default)(`dnb-section dnb-section--${variant ?? (style_type || 'default')}`, (0, _SpacingHelper.createSpacingClasses)(props), className, spacing && `dnb-section--spacing-${(0, _componentHelper.isTrue)(spacing) ? 'large' : spacing}`)
   }, attributes);
   const internalRef = _react.default.useRef();
   const elementRef = inner_ref || internalRef;

package/cjs/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_excluded","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","prototype","propertyIsEnumerable","sourceKeys","defaultProps","element","Section","localProps","context","React","useContext","Context","props","extendPropsWithContext","style_type","spacing","inner_ref","className","children","attributes","params","classnames","createSpacingClasses","isTrue","internalRef","useRef","elementRef","validateDOMAttributes","Element","createElement"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n  | 'lavender'\n  | 'pistachio'\n  | 'emerald-green'\n  | 'sea-green'\n  | 'fire-red'\n  | 'fire-red-8'\n  | 'sand-yellow'\n  | 'black-3'\n  | 'mint-green'\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type SectionProps = {\n  /**\n   * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.\n   */\n  style_type?: SectionStyleTypes | string\n\n  /**\n   * Will add spacing around the given content. If `true`, then `large` is used. See the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). Defaults to `false`.\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  inner_ref?: React.RefObject<HTMLElement>\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    style_type,\n    spacing,\n    inner_ref,\n\n    className,\n    children,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${style_type || 'mint-green-12'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      createSpacingClasses(props),\n      className\n    ),\n    ...(attributes as Record<string, unknown>),\n  }\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = inner_ref || internalRef\n  params['ref'] = elementRef\n\n  validateDOMAttributes(props, params)\n\n  const Element = element || 'section'\n\n  return <Element {...params}>{children}</Element>\n}\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_excluded","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","prototype","propertyIsEnumerable","sourceKeys","defaultProps","element","Section","localProps","context","React","useContext","Context","props","extendPropsWithContext","variant","style_type","spacing","inner_ref","className","children","attributes","params","classnames","createSpacingClasses","isTrue","internalRef","useRef","elementRef","validateDOMAttributes","Element","createElement"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type SectionVariants =\n  | 'error'\n  | 'info'\n  | 'warning'\n  | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n  | 'lavender'\n  | 'pistachio'\n  | 'emerald-green'\n  | 'sea-green'\n  | 'fire-red'\n  | 'fire-red-8'\n  | 'sand-yellow'\n  | 'black-3'\n  | 'mint-green'\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.\n   */\n  style_type?: SectionStyleTypes | string\n\n  /**\n   * Will add spacing around the given content. If `true`, then `large` is used. See the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). Defaults to `false`.\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  inner_ref?: React.RefObject<HTMLElement>\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    variant,\n    style_type,\n    spacing,\n    inner_ref,\n\n    className,\n    children,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ?? (style_type || 'default')}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      createSpacingClasses(props),\n      className\n    ),\n    ...(attributes as Record<string, unknown>),\n  }\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = inner_ref || internalRef\n  params['ref'] = elementRef\n\n  validateDOMAttributes(props, params)\n\n  const Element = element || 'section'\n\n  return <Element {...params}>{children}</Element>\n}\n"],"mappings":"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"}

package/cjs/components/section/style/themes/dnb-section-theme-sbanken.css

@@ -0,0 +1,39 @@
+.dnb-section--transparent::after {
+  color: transparent;
+}
+.dnb-section--default, .dnb-section--divider {
+  color: var(--sb-color-text);
+}
+.dnb-section--default::after, .dnb-section--divider::after {
+  color: var(--sb-color-violet-light-4);
+}
+.dnb-section--white {
+  color: var(--sb-color-text);
+}
+.dnb-section--white::after {
+  color: var(--sb-color-white);
+}
+.dnb-section--error {
+  color: var(--sb-color-text);
+}
+.dnb-section--error::after {
+  color: var(--sb-color-magenta-light-2);
+}
+.dnb-section--info {
+  color: var(--sb-color-text);
+}
+.dnb-section--info::after {
+  color: var(--sb-color-gray-light-2);
+}
+.dnb-section--warning {
+  color: var(--sb-color-text);
+}
+.dnb-section--warning::after {
+  color: var(--sb-color-yellow-light-3);
+}
+.dnb-section--success {
+  color: var(--sb-color-text);
+}
+.dnb-section--success::after {
+  color: var(--sb-color-green-light-2);
+}

package/cjs/components/section/style/themes/dnb-section-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-section--transparent:after{color:transparent}.dnb-section--default,.dnb-section--divider{color:var(--sb-color-text)}.dnb-section--default:after,.dnb-section--divider:after{color:var(--sb-color-violet-light-4)}.dnb-section--white{color:var(--sb-color-text)}.dnb-section--white:after{color:var(--sb-color-white)}.dnb-section--error{color:var(--sb-color-text)}.dnb-section--error:after{color:var(--sb-color-magenta-light-2)}.dnb-section--info{color:var(--sb-color-text)}.dnb-section--info:after{color:var(--sb-color-gray-light-2)}.dnb-section--warning{color:var(--sb-color-text)}.dnb-section--warning:after{color:var(--sb-color-yellow-light-3)}.dnb-section--success{color:var(--sb-color-text)}.dnb-section--success:after{color:var(--sb-color-green-light-2)}