@navikt/ds-css 6.6.0 → 6.7.0

package/dist/global/baseline.css

@@ -54,7 +54,7 @@ legend {
 /* https://web.dev/prefers-reduced-motion/ */
 
 @media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader),
+  *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar),
   ::before,
   ::after {
     animation-delay: -1ms !important;

package/dist/global/baseline.min.css

@@ -1 +1 @@
-:host,html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}[hidden]{display:none}@media (prefers-reduced-motion:reduce){:after,:before,:not(.navds-loader *):not(.navds-loader){animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:scroll!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}.navds-sr-only,.sr-only{border:0;clip:rect(0,0,0,0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navds-sr-only.focusable:active,.navds-sr-only.focusable:focus,.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;-webkit-clip-path:none;clip-path:none;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}:host,:root,[data-theme=light]{--a-shadow-focus:0 0 0 3px var(--a-border-focus);color:var(--a-text-default)}[data-theme=dark]{--a-shadow-focus:var(--a-shadow-focus-inverted);color:var(--a-text-on-inverted)}:host,body{font-family:var(--a-font-family,"Source Sans Pro",Arial,sans-serif);font-size:1.125rem;line-height:1.333}a{color:var(--a-text-action)}
+:host,html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}[hidden]{display:none}@media (prefers-reduced-motion:reduce){:after,:before,:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar){animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:scroll!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}.navds-sr-only,.sr-only{border:0;clip:rect(0,0,0,0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navds-sr-only.focusable:active,.navds-sr-only.focusable:focus,.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;-webkit-clip-path:none;clip-path:none;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}:host,:root,[data-theme=light]{--a-shadow-focus:0 0 0 3px var(--a-border-focus);color:var(--a-text-default)}[data-theme=dark]{--a-shadow-focus:var(--a-shadow-focus-inverted);color:var(--a-text-on-inverted)}:host,body{font-family:var(--a-font-family,"Source Sans Pro",Arial,sans-serif);font-size:1.125rem;line-height:1.333}a{color:var(--a-text-action)}

package/dist/global/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 10:01:18 GMT
+ * Generated on Thu, 02 May 2024 10:37:29 GMT
  */
 
 :root, :host {

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 10:01:18 GMT
+ * Generated on Thu, 02 May 2024 10:37:29 GMT
  */
 :root, :host {
   --a-spacing-1-alt: 0.375rem;
@@ -687,7 +687,7 @@ button,
 }
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader),
+  *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar),
   ::before,
   ::after {
     animation-delay: -1ms !important;
@@ -3021,8 +3021,8 @@ body,
   width: calc(1.25rem - 0.25rem);
   height: calc(1.25rem - 0.25rem);
 }
-.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
-.navds-radio__input:focus-visible + .navds-radio__label::before {
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow:
@@ -3030,30 +3030,12 @@ body,
     0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
     0 0 0 4px var(--a-border-focus);
 }
-@supports not selector(:focus-visible) {
-  .navds-checkbox__input:focus + .navds-checkbox__label::before,
-  .navds-radio__input:focus + .navds-radio__label::before {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
-.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
+.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus + .navds-radio__label::before {
   box-shadow:
     0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
     0 0 0 4px var(--a-border-focus);
 }
-@supports not selector(:focus-visible) {
-  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-  .navds-radio__input:hover:focus + .navds-radio__label::before {
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   content: "";
   position: absolute;
@@ -3101,57 +3083,33 @@ body,
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-position: 0.25rem center;
 }
-.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
+.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
   box-shadow:
     0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
     0 0 0 4px var(--a-border-focus);
 }
-@supports not selector(:focus-visible) {
-  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-    box-shadow:
-      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-      0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
 .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow:
     0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
 }
-.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
+.navds-radio__input:checked:focus + .navds-radio__label::before {
   box-shadow:
     0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
     0 0 0 4px var(--a-border-focus);
 }
-@supports not selector(:focus-visible) {
-  .navds-radio__input:checked:focus + .navds-radio__label::before {
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
   color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
-  + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
   box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
-@supports not selector(:focus-visible) {
-  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
-  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
-  }
-}
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
@@ -3163,58 +3121,29 @@ body,
   box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 .navds-checkbox--error
-  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
   box-shadow:
     0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
     0 0 0 4px var(--a-border-focus);
 }
-@supports not selector(:focus-visible) {
-  .navds-checkbox--error
-    > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-    + .navds-checkbox__label::before,
-  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
 .navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
+  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 .navds-checkbox--error
-  > .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow:
     0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
     0 0 0 4px var(--a-border-focus);
 }
-@supports not selector(:focus-visible) {
-  .navds-checkbox--error
-    > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
-    + .navds-checkbox__label::before,
-  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
-  }
-
-  .navds-checkbox--error
-    > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
-    + .navds-checkbox__label::before,
-  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
-    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-      0 0 0 4px var(--a-border-focus);
-  }
-}
 .navds-checkbox--disabled,
 .navds-radio--disabled {
   opacity: 0.3;
@@ -3241,15 +3170,15 @@ body,
   > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-checkbox--readonly
-  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
+  > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus)
   + .navds-checkbox__label::before,
 .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
-.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
+.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before {
   background-color: var(--__ac-radio-checkbox-readonly-bg);
   box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }
-.navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:focus-visible + .navds-radio__label::before {
+.navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before {
   --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
 }
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
@@ -3273,8 +3202,8 @@ body,
   background-color: var(--a-icon-subtle);
 }
 @media (forced-colors: active) {
-  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
-  .navds-radio__input:focus-visible + .navds-radio__label::before {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before,
+  .navds-radio__input:focus + .navds-radio__label::before {
     outline-color: highlight;
   }
 
@@ -3306,7 +3235,7 @@ body,
     background-color: var(--__ac-radio-checkbox-high-contrast-text);
   }
 
-  .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
+  .navds-radio__input:checked:focus + .navds-radio__label::before {
     border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
     outline: 2px solid highlight;
     outline-offset: 2px;
@@ -3317,7 +3246,7 @@ body,
     color: highlight;
   }
 
-  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before {
     outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
   }
 
@@ -5762,7 +5691,7 @@ button.navds-internalheader__title:active,
 .navds-timeline__pin-wrapper::before {
   content: "";
   top: var(--navdsc-timeline-pin-size);
-  height: calc(88% - var(--navdsc-timeline-pin-size));
+  height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
   width: 1px;
   margin: 0 auto;
   background: var(--a-surface-inverted);
@@ -6301,6 +6230,104 @@ button.navds-internalheader__title:active,
 .navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
   transform: translateY(-1px) rotate(-180deg);
 }
+.navds-progress-bar {
+  background: var(--a-surface-neutral-subtle);
+  position: relative;
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  box-shadow:
+    inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
+    inset 0 0 1px 0 rgba(0 0 0 / 0.2);
+}
+.navds-progress-bar--small {
+  height: 12px;
+  min-width: 12px;
+}
+.navds-progress-bar--medium {
+  height: 16px;
+  min-width: 16px;
+}
+.navds-progress-bar--large {
+  height: 24px;
+  min-width: 24px;
+}
+.navds-progress-bar__foreground {
+  --__ac-progress-bar-translate: initial;
+
+  transform: translateX(var(--__ac-progress-bar-translate));
+  background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
+  transform-origin: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: inherit;
+  transition: transform 0.2s ease;
+}
+.navds-progress-bar__foreground--indeterminate {
+  --__ac-progress-bar-duration: initial;
+  --__ac-progress-bar-delay: initial;
+
+  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
+  animation-timing-function: ease-in-out, ease-in-out;
+  animation-duration: var(--__ac-progress-bar-duration), 2500ms;
+  animation-fill-mode: forwards, none;
+  animation-iteration-count: 1, infinite;
+  animation-delay: 0s, calc((var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay)));
+}
+/* navds-progress-bar-indeterminate wave animation */
+@keyframes navds-progress-bar-indeterminate {
+  0% {
+    left: -50%;
+    width: 50%;
+    transform: translateX(0%);
+  }
+
+  50% {
+    animation-direction: reverse;
+    left: 100%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+
+  100% {
+    left: -50%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+}
+@keyframes navds-progress-bar-indeterminate-grow {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  20% {
+    transform: translateX(-80%);
+  }
+
+  30% {
+    transform: translateX(-40%);
+  }
+
+  40%,
+  50% {
+    transform: translateX(-20%);
+  }
+
+  100% {
+    transform: translateX(-10%);
+  }
+}
+@media (forced-colors: active) {
+  .navds-progress-bar__foreground {
+    background: Highlight;
+  }
+
+  .navds-progress-bar {
+    outline: 1px solid transparent;
+  }
+}
 .navds-skeleton {
   background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
   height: 1.3em;