@dnb/eufemia 10.17.0 → 10.19.0

package/components/textarea/style/dnb-textarea.min.css

@@ -1 +1 @@
-.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{background-color:var(--color-white);border-radius:.25rem;bottom:-.5rem;box-shadow:0 0 0 .0625rem var(--color-sea-green);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:1rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}
+.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:0 var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);background-color:var(--color-white);border-color:transparent;border-radius:.25rem;bottom:-.5rem;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex;margin:var(--textarea-padding-width) 0}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea .dnb-text-counter{margin-left:-.5rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:.5rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}

package/components/textarea/style/dnb-textarea.scss

@@ -31,7 +31,7 @@
     display: inline-flex;
     flex-direction: column;
 
-    margin: var(--textarea-padding-width);
+    margin: 0 var(--textarea-padding-width);
   }
 
   &__shell {
@@ -51,19 +51,29 @@
     right: -0.5rem;
 
     background-color: var(--color-white);
-    box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+    @include fakeBorder(
+      var(--textarea-border-color),
+      var(--textarea-border-width),
+      inset
+    );
 
     border-radius: 0.25rem;
   }
 
   &__row {
     display: inline-flex;
+
+    margin: var(--textarea-padding-width) 0;
   }
 
   &__suffix.dnb-suffix {
     padding-left: 1rem;
   }
 
+  .dnb-text-counter {
+    margin-left: -0.5rem;
+  }
+
   &__textarea {
     position: relative;
     z-index: 2;
@@ -138,7 +148,7 @@
 
   &__inner > .dnb-form-status {
     order: 2;
-    margin: 1rem 0 0 calc(1px - 1px - var(--textarea-padding-width));
+    margin: 0.5rem 0 0 calc(1px - 1px - var(--textarea-padding-width));
   }
 
   &:not(#{&}--vertical) .dnb-form-label {

package/components/textarea/style/themes/dnb-textarea-theme-ui.css

@@ -5,6 +5,13 @@
 /*
  * Utilities
  */
+.dnb-textarea {
+  --textarea-border-color: var(--color-sea-green);
+  --textarea-border-color--hover: var(--color-emerald-green);
+  --textarea-border-color--disabled: var(--color-black-55);
+  --textarea-border-width: 0.0625rem;
+  --textarea-border-width--hover: 0.125rem;
+}
 .dnb-textarea__textarea {
   color: var(--color-black);
   background-color: var(--textarea-background-color);
@@ -18,14 +25,20 @@
   color: var(--color-black-55);
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+  --border-color: var(--textarea-border-color--hover);
+  --border-width: var(--textarea-border-width--hover);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
 .dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
   color: var(--color-black-55);
   background-color: var(--color-black-3);
 }
 .dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+  --border-color: var(--textarea-border-color--disabled);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   background-color: var(--color-black-3);
 }
 .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {

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

@@ -1 +1 @@
-.dnb-textarea__textarea{background-color:var(--textarea-background-color);color:var(--color-black)}.dnb-textarea__textarea ::selection{background-color:var(--color-mint-green);color:var(--color-black);text-shadow:none}.dnb-textarea__placeholder{color:var(--color-black-55)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state,.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{box-shadow:0 0 0 .125rem var(--color-emerald-green)}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}.dnb-textarea--disabled .dnb-textarea__state,.dnb-textarea__textarea[disabled]~.dnb-textarea__state{background-color:var(--color-black-3);box-shadow:0 0 0 .0625rem var(--color-black-55)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover{color:var(--color-fire-red)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}
+.dnb-textarea{--textarea-border-color:var(--color-sea-green);--textarea-border-color--hover:var(--color-emerald-green);--textarea-border-color--disabled:var(--color-black-55);--textarea-border-width:0.0625rem;--textarea-border-width--hover:0.125rem}.dnb-textarea__textarea{background-color:var(--textarea-background-color);color:var(--color-black)}.dnb-textarea__textarea ::selection{background-color:var(--color-mint-green);color:var(--color-black);text-shadow:none}.dnb-textarea__placeholder{color:var(--color-black-55)}.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state,.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--textarea-border-color--hover);--border-width:var(--textarea-border-width--hover);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}.dnb-textarea--disabled .dnb-textarea__state,.dnb-textarea__textarea[disabled]~.dnb-textarea__state{--border-color:var(--textarea-border-color--disabled);--border-width:var(--textarea-border-width);background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled),.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover{color:var(--color-fire-red)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}

package/components/textarea/style/themes/dnb-textarea-theme-ui.scss

@@ -6,6 +6,12 @@
 @import '../../../../style/core/utilities.scss';
 
 .dnb-textarea {
+  --textarea-border-color: var(--color-sea-green);
+  --textarea-border-color--hover: var(--color-emerald-green);
+  --textarea-border-color--disabled: var(--color-black-55);
+  --textarea-border-width: 0.0625rem;
+  --textarea-border-width--hover: 0.125rem;
+
   &__textarea {
     color: var(--color-black);
     background-color: var(--textarea-background-color);
@@ -23,7 +29,10 @@
 
   &__textarea:not([disabled]):not(#{&}--disabled):focus ~ &__state,
   &__textarea:not([disabled]):not(#{&}--disabled):hover ~ &__state {
-    box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+    @include fakeBorder(
+      var(--textarea-border-color--hover),
+      var(--textarea-border-width--hover)
+    );
   }
 
   // We may enable this in future – right now it's unclear
@@ -41,7 +50,11 @@
 
   &--disabled &__state,
   &__textarea[disabled] ~ &__state {
-    box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+    @include fakeBorder(
+      var(--textarea-border-color--disabled),
+      var(--textarea-border-width),
+      inset
+    );
     background-color: var(--color-black-3);
   }
 

package/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.css

@@ -40,7 +40,6 @@ html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled
   --border-width: 0.09375rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
-  background-color: var(--sb-color-gray-light);
   color: var(--sb-color-gray-dark);
 }
 html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button {
@@ -59,6 +58,14 @@ html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:ac
 html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx {
   color: var(--focus-ring-color);
 }
+.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] {
+  --border-color: var(--sb-color-gray-light);
+  --border-width: 0.09375rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-gray-light);
+  color: var(--sb-color-gray-dark);
+}
 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active) {
   background-color: var(--sb-color-violet);
   color: var(--sb-color-white);

package/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-toggle-button__button{--border-color:var(--sb-color-violet);--border-width:0.09375rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]){background-color:var(--sb-color-violet-light-3);color:var(--sb-color-violet)}.dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}.dnb-toggle-button__button[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.09375rem;background-color:var(--sb-color-gray-light);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-gray-dark)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot{background-color:var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx{color:var(--focus-ring-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--sb-color-violet);box-shadow:none;color:var(--sb-color-white)}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]){--border-color:var(--sb-color-violet);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-white)}.dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--sb-color-blue-light-2);color:var(--sb-color-blue-dark-2)}
+.dnb-toggle-button__button{--border-color:var(--sb-color-violet);--border-width:0.09375rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]){background-color:var(--sb-color-violet-light-3);color:var(--sb-color-violet)}.dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}.dnb-toggle-button__button[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-gray-dark)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot{background-color:var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button{background-color:transparent;border-color:var(--focus-ring-color);box-shadow:0 0 0 .0625rem var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx{color:var(--focus-ring-color)}.dnb-toggle-button--checked .dnb-toggle-button__button[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.09375rem;background-color:var(--sb-color-gray-light);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-gray-dark)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--sb-color-violet);box-shadow:none;color:var(--sb-color-white)}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]){--border-color:var(--sb-color-violet);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-white)}.dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled],html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled]{cursor:not-allowed}.dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]){--border-color:var(--sb-color-violet-light-3);--border-width:0.125rem;background-color:var(--sb-color-violet);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet-light-3)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--sb-color-blue-light-2);color:var(--sb-color-blue-dark-2)}

package/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss

@@ -24,7 +24,6 @@
 
     &[disabled] {
       @include fakeBorder(var(--sb-color-gray-light), 0.09375rem, inset);
-      background-color: var(--sb-color-gray-light);
       color: var(--sb-color-gray-dark);
     }
 
@@ -55,6 +54,12 @@
 
   /* stylelint-disable no-descending-specificity */
   &--checked &__button {
+    &[disabled] {
+      @include fakeBorder(var(--sb-color-gray-light), 0.09375rem, inset);
+      background-color: var(--sb-color-gray-light);
+      color: var(--sb-color-gray-dark);
+    }
+
     &:not([disabled]):not(:active) {
       background-color: var(--sb-color-violet);
       color: var(--sb-color-white);

package/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.css

@@ -21,6 +21,10 @@
 .dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
   box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
 }
+.dnb-toggle-button--checked .dnb-toggle-button__button[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
+  background-color: var(--color-mint-green);
+  color: var(--color-white);
+}
 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) {
   background-color: var(--color-emerald-green);
   color: var(--color-mint-green);

package/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.min.css

@@ -1 +1 @@
-.dnb-toggle-button .dnb-checkbox__gfx path{stroke-width:.125rem}.dnb-toggle-button .dnb-radio__input:not([disabled])~.dnb-radio__button{box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon{color:inherit}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button{background-color:transparent;border-color:var(--color-mint-green);box-shadow:0 0 0 .0318rem var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot{background-color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button{--border-color:var(--color-emerald-green);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot{background-color:var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button{background-color:var(--color-mint-green);border-color:var(--color-emerald-green);box-shadow:0 0 0 .0318rem var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx{color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button{background-color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx{color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button{box-shadow:none}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green);outline:none}html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot{background-color:var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx{color:var(--color-sea-green)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__focus{box-shadow:none}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__dot{background-color:transparent}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input~.dnb-checkbox__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover)~.dnb-checkbox__button .dnb-checkbox__focus{box-shadow:none}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-fire-red);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-white);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover)~.dnb-radio__dot{background-color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--color-fire-red)}.dnb-toggle-button>.dnb-form-status{transform:translateY(.1875rem)}
+.dnb-toggle-button .dnb-checkbox__gfx path{stroke-width:.125rem}.dnb-toggle-button .dnb-radio__input:not([disabled])~.dnb-radio__button{box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled],.dnb-toggle-button--checked .dnb-toggle-button__button[disabled]{background-color:var(--color-mint-green);color:var(--color-white)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active),.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active){background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon,.dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon{color:inherit}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button{background-color:transparent;border-color:var(--color-mint-green);box-shadow:0 0 0 .0318rem var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__dot,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__dot{background-color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button{--border-color:var(--color-emerald-green);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__input:not([disabled]):not(:hover):not(:active):not(:hover)~.dnb-radio__dot{background-color:var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button{background-color:var(--color-mint-green);border-color:var(--color-emerald-green);box-shadow:0 0 0 .0318rem var(--color-emerald-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx,.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx{color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button{background-color:var(--color-emerald-green)}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx{color:var(--color-mint-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button{box-shadow:none}html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green);outline:none}html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot,.dnb-toggle-button__button:not([disabled]):active .dnb-radio__dot{background-color:var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button{background-color:transparent;border-color:var(--color-sea-green);box-shadow:0 0 0 .0318rem var(--color-sea-green)}.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx,.dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx{color:var(--color-sea-green)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__focus{box-shadow:none}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled])~.dnb-radio__dot{background-color:transparent}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input~.dnb-checkbox__button{--border-color:var(--color-fire-red);--border-width:0.09375rem;border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover)~.dnb-checkbox__button .dnb-checkbox__focus{box-shadow:none}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active){--border-color:var(--color-fire-red);--border-width:0.0625rem;background-color:var(--color-fire-red);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled])~.dnb-radio__button{--border-color:var(--color-white);--border-width:0.09375rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]):not(:hover)~.dnb-radio__dot{background-color:var(--color-white)}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--color-fire-red)}.dnb-toggle-button>.dnb-form-status{transform:translateY(.1875rem)}

package/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss

@@ -25,6 +25,11 @@
   &--checked &__button,
   &--checked &__button:focus,
   &--checked &__button:hover {
+    &[disabled] {
+      background-color: var(--color-mint-green);
+      color: var(--color-white);
+    }
+
     &:not([disabled]):not(:active) {
       background-color: var(--color-emerald-green);
       color: var(--color-mint-green);

package/components/visually-hidden/VisuallyHidden.js

@@ -27,6 +27,6 @@ const VisuallyHidden = localProps => {
     className: visuallyHiddenClassNames
   }, props), children);
 };
-VisuallyHidden._supportsSpacingProps = true;
+VisuallyHidden._supportsSpacingProps = false;
 export default VisuallyHidden;
 //# sourceMappingURL=VisuallyHidden.js.map

package/components/visually-hidden/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","names":["React","classnames","Context","extendPropsWithContext","defaultProps","focusable","element","VisuallyHidden","localProps","context","useContext","_extendPropsWithConte","children","className","props","_objectWithoutProperties","_excluded","visuallyHiddenClassNames","Element","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../src/components/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport Context from '../../shared/Context'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport type { DynamicElement } from '../../shared/types'\n\nexport interface VisuallyHiddenProps {\n  /**\n   * Hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user)\n   * Default: false\n   */\n  focusable?: boolean\n\n  /**\n   * Root element of the component\n   * Default: span\n   */\n  element?: DynamicElement\n}\n\nexport type VisuallyHiddenAllProps = VisuallyHiddenProps &\n  React.HTMLProps<HTMLSpanElement>\n\nexport const defaultProps = {\n  focusable: false,\n  element: 'span',\n}\n\nconst VisuallyHidden = (localProps: VisuallyHiddenAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const { element, children, className, focusable, ...props } =\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      context?.VisuallyHidden\n    )\n\n  const visuallyHiddenClassNames = classnames(\n    'dnb-visually-hidden',\n    focusable ? 'dnb-visually-hidden--focusable' : 'dnb-sr-only',\n    className\n  )\n  const Element = element || 'span'\n\n  return (\n    <Element\n      className={visuallyHiddenClassNames}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n    </Element>\n  )\n}\n\nVisuallyHidden._supportsSpacingProps = true\n\nexport default VisuallyHidden\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SAASC,sBAAsB,QAAQ,+BAA+B;AAoBtE,OAAO,MAAMC,YAAY,GAAG;EAC1BC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,cAAc,GAAIC,UAAkC,IAAK;EAE7D,MAAMC,OAAO,GAAGT,KAAK,CAACU,UAAU,CAACR,OAAO,CAAC;EAGzC,MAAAS,qBAAA,GACER,sBAAsB,CACpBK,UAAU,EACVJ,YAAY,EACZK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IALG;MAAED,OAAO;MAAEM,QAAQ;MAAEC,SAAS;MAAER;IAAoB,CAAC,GAAAM,qBAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,qBAAA,EAAAK,SAAA;EAOzD,MAAMC,wBAAwB,GAAGhB,UAAU,CACzC,qBAAqB,EACrBI,SAAS,GAAG,gCAAgC,GAAG,aAAa,EAC5DQ,SACF,CAAC;EACD,MAAMK,OAAO,GAAGZ,OAAO,IAAI,MAAM;EAEjC,OACEN,KAAA,CAAAmB,aAAA,CAACD,OAAO,EAAAE,QAAA;IACNP,SAAS,EAAEI;EAAyB,GAC/BH,KAAK,GAETF,QACM,CAAC;AAEd,CAAC;AAEDL,cAAc,CAACc,qBAAqB,GAAG,IAAI;AAE3C,eAAed,cAAc"}
+{"version":3,"file":"VisuallyHidden.js","names":["React","classnames","Context","extendPropsWithContext","defaultProps","focusable","element","VisuallyHidden","localProps","context","useContext","_extendPropsWithConte","children","className","props","_objectWithoutProperties","_excluded","visuallyHiddenClassNames","Element","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../src/components/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport Context from '../../shared/Context'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport type { DynamicElement } from '../../shared/types'\n\nexport interface VisuallyHiddenProps {\n  /**\n   * Hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user)\n   * Default: false\n   */\n  focusable?: boolean\n\n  /**\n   * Root element of the component\n   * Default: span\n   */\n  element?: DynamicElement\n}\n\nexport type VisuallyHiddenAllProps = VisuallyHiddenProps &\n  React.HTMLProps<HTMLSpanElement>\n\nexport const defaultProps = {\n  focusable: false,\n  element: 'span',\n}\n\nconst VisuallyHidden = (localProps: VisuallyHiddenAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const { element, children, className, focusable, ...props } =\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      context?.VisuallyHidden\n    )\n\n  const visuallyHiddenClassNames = classnames(\n    'dnb-visually-hidden',\n    focusable ? 'dnb-visually-hidden--focusable' : 'dnb-sr-only',\n    className\n  )\n  const Element = element || 'span'\n\n  return (\n    <Element\n      className={visuallyHiddenClassNames}\n      {...(props as Record<string, unknown>)}\n    >\n      {children}\n    </Element>\n  )\n}\n\nVisuallyHidden._supportsSpacingProps = false\n\nexport default VisuallyHidden\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SAASC,sBAAsB,QAAQ,+BAA+B;AAoBtE,OAAO,MAAMC,YAAY,GAAG;EAC1BC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,cAAc,GAAIC,UAAkC,IAAK;EAE7D,MAAMC,OAAO,GAAGT,KAAK,CAACU,UAAU,CAACR,OAAO,CAAC;EAGzC,MAAAS,qBAAA,GACER,sBAAsB,CACpBK,UAAU,EACVJ,YAAY,EACZK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IALG;MAAED,OAAO;MAAEM,QAAQ;MAAEC,SAAS;MAAER;IAAoB,CAAC,GAAAM,qBAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,qBAAA,EAAAK,SAAA;EAOzD,MAAMC,wBAAwB,GAAGhB,UAAU,CACzC,qBAAqB,EACrBI,SAAS,GAAG,gCAAgC,GAAG,aAAa,EAC5DQ,SACF,CAAC;EACD,MAAMK,OAAO,GAAGZ,OAAO,IAAI,MAAM;EAEjC,OACEN,KAAA,CAAAmB,aAAA,CAACD,OAAO,EAAAE,QAAA;IACNP,SAAS,EAAEI;EAAyB,GAC/BH,KAAK,GAETF,QACM,CAAC;AAEd,CAAC;AAEDL,cAAc,CAACc,qBAAqB,GAAG,KAAK;AAE5C,eAAed,cAAc"}

package/es/components/AriaLive.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+/**
+ * Library Index aria-live to autogenerate all the components and extensions
+ * Used by "prepareAriaLives"
+ */
+import AriaLive from './aria-live/AriaLive';
+export * from './aria-live/AriaLive';
+export default AriaLive;

package/es/components/AriaLive.js

@@ -0,0 +1,4 @@
+import AriaLive from './aria-live/AriaLive';
+export * from './aria-live/AriaLive';
+export default AriaLive;
+//# sourceMappingURL=AriaLive.js.map

package/es/components/AriaLive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaLive.js","names":["AriaLive"],"sources":["../../../src/components/AriaLive.ts"],"sourcesContent":["/**\n * ATTENTION: This file is auto generated by using \"prepareTemplates\".\n * Do not change the content!\n *\n */\n\n/**\n * Library Index aria-live to autogenerate all the components and extensions\n * Used by \"prepareAriaLives\"\n */\n\nimport AriaLive from './aria-live/AriaLive'\nexport * from './aria-live/AriaLive'\nexport default AriaLive\n"],"mappings":"AAWA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,cAAc,sBAAsB;AACpC,eAAeA,QAAQ"}

package/es/components/aria-live/AriaLive.d.ts

@@ -0,0 +1,6 @@
+import { AriaLiveAllProps } from './types';
+declare function AriaLive({ element, ...props }: AriaLiveAllProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AriaLive {
+    var _supportsSpacingProps: string;
+}
+export default AriaLive;

package/es/components/aria-live/AriaLive.js

@@ -0,0 +1,15 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["element"];
+import React from 'react';
+import useAriaLive from './useAriaLive';
+export default function AriaLive(_ref) {
+  let {
+      element
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const ariaAttributes = useAriaLive(props);
+  const Element = element || 'section';
+  return React.createElement(Element, ariaAttributes);
+}
+AriaLive._supportsSpacingProps = 'children';
+//# sourceMappingURL=AriaLive.js.map

package/es/components/aria-live/AriaLive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaLive.js","names":["React","useAriaLive","AriaLive","_ref","element","props","_objectWithoutProperties","_excluded","ariaAttributes","Element","createElement","_supportsSpacingProps"],"sources":["../../../../src/components/aria-live/AriaLive.tsx"],"sourcesContent":["import React from 'react'\nimport { AriaLiveAllProps } from './types'\nimport useAriaLive from './useAriaLive'\n\nexport default function AriaLive({ element, ...props }: AriaLiveAllProps) {\n  const ariaAttributes = useAriaLive(props)\n  const Element = element || 'section'\n\n  return <Element {...ariaAttributes} />\n}\n\nAriaLive._supportsSpacingProps = 'children'\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,WAAW,MAAM,eAAe;AAEvC,eAAe,SAASC,QAAQA,CAAAC,IAAA,EAA0C;EAAA,IAAzC;MAAEC;IAAoC,CAAC,GAAAD,IAAA;IAAzBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAClD,MAAMC,cAAc,GAAGP,WAAW,CAACI,KAAK,CAAC;EACzC,MAAMI,OAAO,GAAGL,OAAO,IAAI,SAAS;EAEpC,OAAOJ,KAAA,CAAAU,aAAA,CAACD,OAAO,EAAKD,cAAiB,CAAC;AACxC;AAEAN,QAAQ,CAACS,qBAAqB,GAAG,UAAU"}

package/es/components/aria-live/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Component Entry
+ *
+ */
+import AriaLive from './AriaLive';
+export default AriaLive;
+export * from './AriaLive';

package/es/components/aria-live/index.js

@@ -0,0 +1,4 @@
+import AriaLive from './AriaLive';
+export default AriaLive;
+export * from './AriaLive';
+//# sourceMappingURL=index.js.map

package/es/components/aria-live/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AriaLive"],"sources":["../../../../src/components/aria-live/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport AriaLive from './AriaLive'\nexport default AriaLive\nexport * from './AriaLive'\n"],"mappings":"AAKA,OAAOA,QAAQ,MAAM,YAAY;AACjC,eAAeA,QAAQ;AACvB,cAAc,YAAY"}

package/es/components/aria-live/types.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+export type AriaLiveProps = {
+    element?: React.ElementType;
+    /**
+     * The variant of the announcement. Can be 'text' or 'content'.
+     */
+    variant?: 'text' | 'content';
+    /**
+     * The priority level of the announcement. Can be 'low', or 'high'.
+     */
+    priority?: 'low' | 'high';
+    /**
+     * Delay in milliseconds before the announcement is made. Defaults to 1000.
+     * @default 1000
+     */
+    delay?: number;
+    /**
+     * Whether the AriaLive component is on or off.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The politeness level of the announcement. Can be 'off', 'polite', or 'assertive'.
+     */
+    politeness?: React.HTMLAttributes<HTMLElement>['aria-live'];
+    /**
+     * Whether the entire region should be considered as a whole when communicating updates.
+     */
+    atomic?: React.HTMLAttributes<HTMLElement>['aria-atomic'];
+    /**
+     * What types of changes should be presented to the user. Can be 'additions', 'removals', 'text', or 'all'.
+     */
+    relevant?: React.HTMLAttributes<HTMLElement>['aria-relevant'];
+    /**
+     * Whether to show the children or not.
+     * @default false
+     */
+    showAnnouncement?: boolean;
+    /**
+     * The content to be announced.
+     */
+    children: React.ReactNode;
+};
+export type AriaLiveAllProps = AriaLiveProps & React.HTMLAttributes<HTMLElement>;

package/es/components/aria-live/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/aria-live/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/aria-live/types.ts"],"sourcesContent":["export type AriaLiveProps = {\n  element?: React.ElementType\n\n  /**\n   * The variant of the announcement. Can be 'text' or 'content'.\n   */\n  variant?: 'text' | 'content'\n\n  /**\n   * The priority level of the announcement. Can be 'low', or 'high'.\n   */\n  priority?: 'low' | 'high'\n\n  /**\n   * Delay in milliseconds before the announcement is made. Defaults to 1000.\n   * @default 1000\n   */\n  delay?: number\n\n  /**\n   * Whether the AriaLive component is on or off.\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * The politeness level of the announcement. Can be 'off', 'polite', or 'assertive'.\n   */\n  politeness?: React.HTMLAttributes<HTMLElement>['aria-live']\n\n  /**\n   * Whether the entire region should be considered as a whole when communicating updates.\n   */\n  atomic?: React.HTMLAttributes<HTMLElement>['aria-atomic']\n\n  /**\n   * What types of changes should be presented to the user. Can be 'additions', 'removals', 'text', or 'all'.\n   */\n  relevant?: React.HTMLAttributes<HTMLElement>['aria-relevant']\n\n  /**\n   * Whether to show the children or not.\n   * @default false\n   */\n  showAnnouncement?: boolean\n\n  /**\n   * The content to be announced.\n   */\n  children: React.ReactNode\n}\n\nexport type AriaLiveAllProps = AriaLiveProps &\n  React.HTMLAttributes<HTMLElement>\n"],"mappings":""}