npm - @dnb/eufemia - Versions diffs - 10.30.2 → 10.31.0 - Mend

@dnb/eufemia 10.30.2 → 10.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (294) hide show

package/cjs/style/dnb-ui-body.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);-moz-tab-size:4;tab-size:4;word-break:break-word}body{margin:0}html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{-webkit-text-decoration:none;text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;--eufemia-version:"10.30.2";color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}body :after,body :before{text-decoration:inherit;vertical-align:inherit}body hr{height:0;overflow:visible}body main{display:block}body nav ol,body nav ul{list-style:none}body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}body b,body strong{font-weight:bolder}body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace)}body ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}body audio,body video{display:inline-block}body audio:not([controls]){display:none;height:0}body img{border-style:none}body svg:not([fill]){fill:currentcolor}body svg:not(:root){overflow:hidden}body table{border-collapse:collapse}body button,body input,body select,body textarea{font-family:inherit;font-size:inherit;line-height:inherit}body button,body figure,body input,body select{margin:0}body button{overflow:visible;text-transform:none}body fieldset{padding:.35rem .75rem .625rem}body input{overflow:visible;word-break:normal}body legend{color:inherit;display:table;max-width:100%;white-space:normal}body progress{display:inline-block;vertical-align:baseline}body select{text-transform:none}body textarea{overflow:auto;resize:vertical}body [type=checkbox],body [type=radio]{padding:0}body input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}body ::input-placeholder{color:inherit;opacity:.54}body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}body ::-moz-focus-inner{border-style:none;padding:0}body details{display:block}body summary{display:list-item}body canvas{display:inline-block}body template{display:none}body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}body [hidden]{display:none}body [aria-busy=true]{cursor:progress}body [aria-controls]:not(input){cursor:pointer}body [aria-disabled=true],body [disabled]{cursor:not-allowed}body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{body{background-color:#fff;color:#000}}body .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}
1	+ html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);-moz-tab-size:4;tab-size:4;word-break:break-word}body{margin:0}html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{-webkit-text-decoration:none;text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;--eufemia-version:"10.31.0";color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}body :after,body :before{text-decoration:inherit;vertical-align:inherit}body hr{height:0;overflow:visible}body main{display:block}body nav ol,body nav ul{list-style:none}body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}body b,body strong{font-weight:bolder}body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace)}body ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}body audio,body video{display:inline-block}body audio:not([controls]){display:none;height:0}body img{border-style:none}body svg:not([fill]){fill:currentcolor}body svg:not(:root){overflow:hidden}body table{border-collapse:collapse}body button,body input,body select,body textarea{font-family:inherit;font-size:inherit;line-height:inherit}body button,body figure,body input,body select{margin:0}body button{overflow:visible;text-transform:none}body fieldset{padding:.35rem .75rem .625rem}body input{overflow:visible;word-break:normal}body legend{color:inherit;display:table;max-width:100%;white-space:normal}body progress{display:inline-block;vertical-align:baseline}body select{text-transform:none}body textarea{overflow:auto;resize:vertical}body [type=checkbox],body [type=radio]{padding:0}body input[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}body ::input-placeholder{color:inherit;opacity:.54}body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}body ::-moz-focus-inner{border-style:none;padding:0}body details{display:block}body summary{display:list-item}body canvas{display:inline-block}body template{display:none}body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}body [hidden]{display:none}body [aria-busy=true]{cursor:progress}body [aria-controls]:not(input){cursor:pointer}body [aria-disabled=true],body [disabled]{cursor:not-allowed}body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{body{background-color:#fff;color:#000}}body .eufemia-theme{color:var(--theme-color-body,var(--color-black-80,#333));font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis)}

package/cjs/style/dnb-ui-components.css CHANGED Viewed

@@ -2533,11 +2533,18 @@ button.dnb-button::-moz-focus-inner {
 }
 .dnb-checkbox {
+  --checkbox-border-radius: 0.25rem;
+  --checkbox-gfx-border-radius__indeterminate: 0.125rem;
   --checkbox-width--large: 2rem;
   --checkbox-height--large: 2rem;
+  --checkbox-gfx-height__indeterminate: 0.625rem;
+  --checkbox-gfx-width__indeterminate: 0.625rem;
+  --checkbox-gfx-height__indeterminate--large: 0.875rem;
+  --checkbox-gfx-width__indeterminate--large: 0.875rem;
   --checkbox-border-width: 0.125rem;
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx-on: black;
-  --checkbox-color-gfx-off: black;
+  --checkbox-color-gfx-off: white;
   --checkbox-color-background-on: white;
   --checkbox-color-background-off: white;
   --checkbox-color-border-on: black;
@@ -2547,6 +2554,7 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-color-background-off--disabled: lightgrey;
   --checkbox-color-border-on--disabled: grey;
   --checkbox-color-border-off--disabled: grey;
+  --checkbox-color-gfx__indeterminate--disabled: grey;
   --checkbox-color-background--active: lightgrey;
   --checkbox-color-border--active: transparent;
   --checkbox-color-gfx--hover: grey;
@@ -2560,6 +2568,15 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-color-background-on--error: red;
   --checkbox-color-background--error-contrast: lavenderblush;
   --checkbox-color-border--error: red;
+  --checkbox-color-gfx-indeterminate--error: red;
+  --checkbox-color-gfx--error--hover: red;
+  --checkbox-color-background--error--hover: lavenderblush;
+  --checkbox-color-border--error--hover: red;
+  --checkbox-color-background-indeterminate: grey;
+  --checkbox-color-gfx-indeterminate: darkgray;
+  --checkbox-color-background-indeterminate--active: grey;
+  --checkbox-color-border-indeterminate--active: white;
+  --checkbox-color-gfx-indeterminate--active: white;
   --checkbox-bounding--medium: 1.75, 1.75;
   display: inline-flex;
   flex-direction: column;
@@ -2613,12 +2630,12 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   z-index: 4;
   width: calc(var(--checkbox-width--medium) - 0.25rem);
   height: calc(var(--checkbox-height--medium) - 0.25rem);
-  border-radius: 0.25rem;
+  border-radius: var(--checkbox-border-radius);
 }
 .dnb-checkbox--large .dnb-checkbox__focus, .dnb-checkbox--large .dnb-checkbox__button {
   width: var(--checkbox-width--large);
   height: var(--checkbox-height--large);
-  border-radius: 0.25rem;
+  border-radius: var(--checkbox-border-radius);
 }
 .dnb-checkbox__gfx {
   position: absolute;
@@ -2702,7 +2719,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   background-color: var(--checkbox-color-background-on);
   border-color: var(--checkbox-color-border-on);
 }
-.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
+.dnb-checkbox__input:not([disabled]):not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
   opacity: 0;
   transform: scale(0.8);
   color: var(--checkbox-color-gfx-off);
@@ -2710,6 +2727,33 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 .dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-off);
   border-color: var(--checkbox-color-border-off);
+  transition: background-color 100ms ease-out;
+}
+.dnb-checkbox__input ~ .dnb-checkbox__indeterminate {
+  position: absolute;
+  z-index: 5;
+  width: var(--checkbox-gfx-width__indeterminate);
+  height: var(--checkbox-gfx-height__indeterminate);
+  transform: scale(0.85);
+  opacity: 0;
+  background-color: var(--checkbox-color-gfx-indeterminate);
+  border-radius: var(--checkbox-gfx-border-radius__indeterminate);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
+}
+.dnb-checkbox__input:indeterminate ~ .dnb-checkbox__indeterminate {
+  transform: scale(1);
+  opacity: 1;
+}
+.dnb-checkbox__input:indeterminate:checked ~ .dnb-checkbox__button {
+  background-color: transparent;
+  border-color: var(--checkbox-color-border-off);
+}
+.dnb-checkbox__input:indeterminate:hover ~ .dnb-checkbox__gfx, .dnb-checkbox__input:indeterminate:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input:indeterminate:checked:hover ~ .dnb-checkbox__gfx {
+  color: transparent;
+}
+.dnb-checkbox--large .dnb-checkbox__input:indeterminate ~ .dnb-checkbox__indeterminate {
+  width: var(--checkbox-gfx-width__indeterminate--large);
+  height: var(--checkbox-gfx-height__indeterminate--large);
 }
 .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-on--disabled);
@@ -2722,6 +2766,12 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   border-color: var(--checkbox-color-border-off--disabled);
   background-color: var(--checkbox-color-background-off--disabled);
 }
+.dnb-checkbox__input[disabled]:indeterminate ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx__indeterminate--disabled);
+}
+.dnb-checkbox__input[disabled]:indeterminate ~ .dnb-checkbox__gfx {
+  color: transparent;
+}
 .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background--active);
   border-color: var(--checkbox-color-border--active);
@@ -2729,44 +2779,54 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 .dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx-on);
 }
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
+.dnb-checkbox__input:not([disabled]):indeterminate:active ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-indeterminate--active);
+  border-color: var(--checkbox-color-border-indeterminate--active);
+}
+.dnb-checkbox__input:not([disabled]):indeterminate:active ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx-indeterminate--active);
+}
+.dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__button {
   border-color: var(--checkbox-color-border-off--hover);
   background-color: var(--checkbox-color-background--hover);
 }
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
+.dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--hover);
 }
-.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-checkbox__button {
-  border-color: var(--checkbox-color-border-on--hover);
+.dnb-checkbox__input:not([disabled]):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled])[data-checked=true]:hover ~ .dnb-checkbox__button {
+  border: var(--checkbox-border-width--hover) solid var(--checkbox-color-border-on--hover);
 }
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button {
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__button {
   border: none;
   background-color: var(--checkbox-color-background--focus);
 }
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx {
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--focus);
 }
-.dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
+.dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
   display: block;
 }
+.dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx--focus);
+}
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button {
   border: none;
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
   display: block;
   --border-color: var(--checkbox-color-border--error);
-  --border-width: var(--focus-ring-width);
+  --border-width: var(--checkbox-border-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button {
-  background-color: var(--checkbox-color-background--error-contrast);
+  background-color: var(--checkbox-color-background--error--hover);
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] {
-  border-color: var(--checkbox-color-border--error);
+  border-color: var(--checkbox-color-border--error--hover);
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
-  color: var(--checkbox-color-gfx--error-contrast);
+  color: var(--checkbox-color-gfx--error--hover);
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--error);
@@ -2775,7 +2835,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
   border: none;
   background-color: var(--checkbox-color-background--error-contrast);
   --border-color: var(--checkbox-color-border--error);
-  --border-width: calc(var(--focus-ring-width) + 0.0625rem);
+  --border-width: calc(var(--checkbox-border-width--hover));
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -2785,6 +2845,23 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-on--error);
 }
+.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error-contrast);
+  background-color: var(--checkbox-color-gfx--error-contrast);
+  border-radius: var(--checkbox-border-radius);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not(:active):not(:hover) ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx-indeterminate--error);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not(:indeterminate) ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx-indeterminate--error);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:hover:not(:active) ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx--error--hover);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error--hover);
+}
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button {
   border-color: var(--skeleton-color);
 }
@@ -2794,6 +2871,9 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__gfx {
   color: var(--skeleton-color);
 }
+.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__indeterminate {
+  background-color: var(--skeleton-color);
+}
 /*
 * DatePicker component