@navikt/ds-css 7.31.0 → 7.32.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-css
 
+## 7.32.0
+
+### Patch Changes
+
+- ReadMore: You can now reach the content by tabbing ([#4116](https://github.com/navikt/aksel/pull/4116))
+
+- Darkside: Adjust GuidePanel arrow position ([#4120](https://github.com/navikt/aksel/pull/4120))
+
+- Process: Adjusted active-marking ([#4118](https://github.com/navikt/aksel/pull/4118))
+
 ## 7.31.0
 
 ### Minor Changes

package/darkside/guide-panel.darkside.css

@@ -105,14 +105,14 @@
   .aksel-guide-panel[data-poster="false"] & {
     top: calc(var(--__axc-guide-panel-guide-size) / 2);
     left: calc(var(--ax-space-20) * -1 - 2px);
-    transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
+    transform: translateY(-15%) rotateZ(-90deg) scaleX(-1);
   }
 
   @media (min-width: 480px) {
     .aksel-guide-panel[data-responsive="true"] & {
       top: calc(var(--__axc-guide-panel-guide-size) / 2);
       left: calc(var(--ax-space-20) * -1 - 2px);
-      transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
+      transform: translateY(-15%) rotateZ(-90deg) scaleX(-1);
     }
   }
 }

package/darkside/process.darkside.css

@@ -107,7 +107,10 @@
   }
 
   .aksel-process__event[data-status="active"] & {
-    outline: 4px solid var(--ax-bg-moderate);
+    z-index: 1;
+    box-shadow: 0 0 0 2px var(--ax-bg-default);
+    outline: 2px solid var(--ax-bg-strong);
+    outline-offset: 2px;
   }
 
   .aksel-process__event[data-status="uncompleted"] & {
@@ -145,6 +148,11 @@
     outline-color: ButtonText;
     background-color: ButtonText;
     color: ButtonFace;
+    forced-color-adjust: none;
+  }
+
+  .aksel-process__event[data-status="active"] .aksel-process__bullet {
+    box-shadow: 0 0 0 2px Canvas;
   }
 
   .aksel-process__event:is([data-status="active"]) .aksel-process__line {

package/darkside/read-more.darkside.css

@@ -70,6 +70,11 @@
   margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
   padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
 
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
   &[data-state="closed"] {
     display: none;
   }

package/dist/component/process.css

@@ -108,7 +108,10 @@
   }
 
 .navds-process__event[data-status="active"] .navds-process__bullet {
-    outline: 4px solid var(--a-surface-alt-3-subtle);
+    z-index: 1;
+    box-shadow: 0 0 0 2px var(--a-surface-default);
+    outline: 2px solid var(--a-surface-alt-3);
+    outline-offset: 2px;
   }
 
 .navds-process__event[data-status="uncompleted"] .navds-process__bullet {
@@ -145,6 +148,11 @@
     outline-color: ButtonText;
     background-color: ButtonText;
     color: ButtonFace;
+    forced-color-adjust: none;
+  }
+
+  .navds-process__event[data-status="active"] .navds-process__bullet {
+    box-shadow: 0 0 0 2px Canvas;
   }
 
   .navds-process__event:is([data-status="active"]) .navds-process__line {

package/dist/component/process.min.css

@@ -1 +1 @@
-.navds-process{--__ac-process-circle-base:2rem;--__ac-process-circle-large:var(--__ac-process-circle-base);--__ac-process-circle-small:1rem;--__ac-process-circle-size:var(--__ac-process-circle-large);--__ac-process-border-width:2px;list-style:none;margin:0;padding:0}.navds-process__event{display:grid;grid-template-columns:var(--__ac-process-circle-base) auto;grid-template-rows:[line-1] auto [step-start] var(--__ac-process-circle-size) [line-2 step-end] auto;justify-items:flex-start}.navds-process__event[data-dot=true]{--__ac-process-circle-size:var(--__ac-process-circle-small);-webkit-margin-before:calc((var(--__ac-process-circle-small)/2)*-1);margin-block-start:calc((var(--__ac-process-circle-small)/2)*-1)}.navds-process__event[data-dot=true] .navds-process__line{-webkit-margin-before:calc(var(--__ac-process-circle-size)/2);margin-block-start:calc(var(--__ac-process-circle-size)/2)}.navds-process__event[data-dot=true] .navds-process__bullet{--__ac-process-circle-size:var(--__ac-process-circle-small);margin-top:calc((var(--__ac-process-circle-large) - var(--__ac-process-circle-small))/2)}.navds-process__line{border:calc(var(--__ac-process-border-width)/2) solid;border-color:var(--a-border-subtle);grid-column:1;grid-row:line-2;justify-self:center;min-height:2rem;width:0}.navds-process__event[data-status=active] .navds-process__line{border-color:var(--a-border-alt-3);border-image:linear-gradient(to bottom,var(--a-border-alt-3) 50%,var(--a-border-subtle) 90%);border-image-slice:1}.navds-process__event[data-status=completed] .navds-process__line{border-color:var(--a-border-alt-3)}.navds-process__event:not([data-status=active]) .navds-process__line{border-image:none}.navds-process__event:last-of-type .navds-process__line{display:none}.navds-process__item{display:grid;gap:var(--a-spacing-4);grid-column:1/-1;grid-row:2/-1;grid-template-columns:[bullet] var(--__ac-process-circle-base) [content] auto;justify-content:flex-start;margin:calc(var(--__ac-process-border-width)*-1) calc(var(--__ac-process-border-width)*-1) var(--a-spacing-4);padding:var(--__ac-process-border-width);width:100%}.navds-process__event:last-child .navds-process__item{margin-bottom:0}.navds-process__bullet{border:var(--__ac-process-border-width) solid;border-color:var(--a-border-subtle);border-radius:var(--a-border-radius-full);color:var(--a-text-subtle);display:inline-grid;grid-column:bullet;height:var(--__ac-process-circle-size);line-height:1;place-items:center;place-self:baseline center;transition-duration:70ms;transition-property:background,border-color,color;transition-timing-function:linear;width:var(--__ac-process-circle-size)}.navds-process__bullet svg{height:min(calc(var(--__ac-process-circle-size)*.75),1.5rem);width:min(calc(var(--__ac-process-circle-size)*.75),1.5rem)}.navds-process__event:is([data-status=completed],[data-status=active]) .navds-process__bullet{background:var(--a-surface-alt-3);border-color:#0000;color:var(--a-text-on-alt-3)}.navds-process__event[data-status=active] .navds-process__bullet{outline:4px solid var(--a-surface-alt-3-subtle)}.navds-process__event[data-status=uncompleted] .navds-process__bullet{transition:none}.navds-process__body{grid-column:content}.navds-process__title{padding-block:.16rem var(--a-spacing-1)}.navds-process__event[data-status=active] .navds-process__title:has(+.navds-process__active-label){-webkit-padding-after:0;padding-block-end:0}.navds-process__active-label{color:var(--a-surface-alt-3);margin-block:0 var(--a-spacing-1)}.navds-process__active-label:last-of-type{-webkit-margin-after:0;margin-block-end:0}@media (forced-colors:active){.navds-process__bullet{transition:none}.navds-process__event:is([data-status=completed],[data-status=active]) .navds-process__bullet{background-color:ButtonText;color:ButtonFace;outline-color:ButtonText}.navds-process__event:is([data-status=active]) .navds-process__line{border-image:none}}
+.navds-process{--__ac-process-circle-base:2rem;--__ac-process-circle-large:var(--__ac-process-circle-base);--__ac-process-circle-small:1rem;--__ac-process-circle-size:var(--__ac-process-circle-large);--__ac-process-border-width:2px;list-style:none;margin:0;padding:0}.navds-process__event{display:grid;grid-template-columns:var(--__ac-process-circle-base) auto;grid-template-rows:[line-1] auto [step-start] var(--__ac-process-circle-size) [line-2 step-end] auto;justify-items:flex-start}.navds-process__event[data-dot=true]{--__ac-process-circle-size:var(--__ac-process-circle-small);-webkit-margin-before:calc((var(--__ac-process-circle-small)/2)*-1);margin-block-start:calc((var(--__ac-process-circle-small)/2)*-1)}.navds-process__event[data-dot=true] .navds-process__line{-webkit-margin-before:calc(var(--__ac-process-circle-size)/2);margin-block-start:calc(var(--__ac-process-circle-size)/2)}.navds-process__event[data-dot=true] .navds-process__bullet{--__ac-process-circle-size:var(--__ac-process-circle-small);margin-top:calc((var(--__ac-process-circle-large) - var(--__ac-process-circle-small))/2)}.navds-process__line{border:calc(var(--__ac-process-border-width)/2) solid;border-color:var(--a-border-subtle);grid-column:1;grid-row:line-2;justify-self:center;min-height:2rem;width:0}.navds-process__event[data-status=active] .navds-process__line{border-color:var(--a-border-alt-3);border-image:linear-gradient(to bottom,var(--a-border-alt-3) 50%,var(--a-border-subtle) 90%);border-image-slice:1}.navds-process__event[data-status=completed] .navds-process__line{border-color:var(--a-border-alt-3)}.navds-process__event:not([data-status=active]) .navds-process__line{border-image:none}.navds-process__event:last-of-type .navds-process__line{display:none}.navds-process__item{display:grid;gap:var(--a-spacing-4);grid-column:1/-1;grid-row:2/-1;grid-template-columns:[bullet] var(--__ac-process-circle-base) [content] auto;justify-content:flex-start;margin:calc(var(--__ac-process-border-width)*-1) calc(var(--__ac-process-border-width)*-1) var(--a-spacing-4);padding:var(--__ac-process-border-width);width:100%}.navds-process__event:last-child .navds-process__item{margin-bottom:0}.navds-process__bullet{border:var(--__ac-process-border-width) solid;border-color:var(--a-border-subtle);border-radius:var(--a-border-radius-full);color:var(--a-text-subtle);display:inline-grid;grid-column:bullet;height:var(--__ac-process-circle-size);line-height:1;place-items:center;place-self:baseline center;transition-duration:70ms;transition-property:background,border-color,color;transition-timing-function:linear;width:var(--__ac-process-circle-size)}.navds-process__bullet svg{height:min(calc(var(--__ac-process-circle-size)*.75),1.5rem);width:min(calc(var(--__ac-process-circle-size)*.75),1.5rem)}.navds-process__event:is([data-status=completed],[data-status=active]) .navds-process__bullet{background:var(--a-surface-alt-3);border-color:#0000;color:var(--a-text-on-alt-3)}.navds-process__event[data-status=active] .navds-process__bullet{box-shadow:0 0 0 2px var(--a-surface-default);outline:2px solid var(--a-surface-alt-3);outline-offset:2px;z-index:1}.navds-process__event[data-status=uncompleted] .navds-process__bullet{transition:none}.navds-process__body{grid-column:content}.navds-process__title{padding-block:.16rem var(--a-spacing-1)}.navds-process__event[data-status=active] .navds-process__title:has(+.navds-process__active-label){-webkit-padding-after:0;padding-block-end:0}.navds-process__active-label{color:var(--a-surface-alt-3);margin-block:0 var(--a-spacing-1)}.navds-process__active-label:last-of-type{-webkit-margin-after:0;margin-block-end:0}@media (forced-colors:active){.navds-process__bullet{transition:none}.navds-process__event:is([data-status=completed],[data-status=active]) .navds-process__bullet{background-color:ButtonText;color:ButtonFace;forced-color-adjust:none;outline-color:ButtonText}.navds-process__event[data-status=active] .navds-process__bullet{box-shadow:0 0 0 2px Canvas}.navds-process__event:is([data-status=active]) .navds-process__line{border-image:none}}

package/dist/component/readmore.css

@@ -27,7 +27,8 @@
     color: ButtonText;
   }
 
-  .navds-read-more__button.navds-read-more__button:focus-visible {
+  .navds-read-more__button.navds-read-more__button:focus-visible,
+  .navds-read-more__content.navds-read-more__content:focus-visible {
     box-shadow: none;
     outline: 2px solid highlight;
     outline-offset: 2px;
@@ -43,13 +44,15 @@
   background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
 }
 
-.navds-read-more__button:focus-visible {
+.navds-read-more__button:focus-visible,
+.navds-read-more__content:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
-  .navds-read-more__button:focus {
+  .navds-read-more__button:focus,
+  .navds-read-more__content:focus {
     outline: none;
     box-shadow: var(--a-shadow-focus);
   }

package/dist/component/readmore.min.css

@@ -1 +1 @@
-.navds-read-more__button{align-items:flex-start;background:none;border:none;border-radius:var(--a-border-radius-small);color:var(--ac-read-more-text,var(--a-text-action));cursor:pointer;display:flex;gap:var(--a-spacing-05);margin:0;padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);text-align:start}.navds-read-more--small .navds-read-more__button{padding:var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05)}.navds-read-more--large .navds-read-more__button{padding:var(--a-spacing-3) var(--a-spacing-1-alt) var(--a-spacing-3) var(--a-spacing-05)}@media (forced-colors:active){.navds-read-more__button{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-read-more__button.navds-read-more__button:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-read-more__button:hover{background-color:var(--ac-read-more-hover-bg,var(--a-surface-hover));color:var(--ac-read-more-hover-text,var(--a-text-action-hover))}.navds-read-more__button:active{background-color:var(--ac-read-more-active-bg,var(--a-surface-active))}.navds-read-more__button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-read-more__button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-read-more__content{border-left:2px solid var(--ac-read-more-line,var(--a-border-divider));color:var(--a-text-default);margin-left:.8125rem;margin-top:var(--a-spacing-1);padding-left:.8125rem}.navds-read-more--small .navds-read-more__content{margin-left:.6875rem;padding-left:.6875rem}.navds-read-more__content--closed{display:none}.navds-read-more__expand-icon{flex-shrink:0;font-size:1.5rem}.navds-read-more--small .navds-read-more__expand-icon{font-size:1.25rem}.navds-read-more__button:hover>.navds-read-more__expand-icon{position:relative;top:1px}.navds-read-more--open>.navds-read-more__button>.navds-read-more__expand-icon{transform:rotate(-180deg)}.navds-read-more--open>.navds-read-more__button:hover>.navds-read-more__expand-icon{top:-1px}
+.navds-read-more__button{align-items:flex-start;background:none;border:none;border-radius:var(--a-border-radius-small);color:var(--ac-read-more-text,var(--a-text-action));cursor:pointer;display:flex;gap:var(--a-spacing-05);margin:0;padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);text-align:start}.navds-read-more--small .navds-read-more__button{padding:var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05)}.navds-read-more--large .navds-read-more__button{padding:var(--a-spacing-3) var(--a-spacing-1-alt) var(--a-spacing-3) var(--a-spacing-05)}@media (forced-colors:active){.navds-read-more__button{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-read-more__button.navds-read-more__button:focus-visible,.navds-read-more__content.navds-read-more__content:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-read-more__button:hover{background-color:var(--ac-read-more-hover-bg,var(--a-surface-hover));color:var(--ac-read-more-hover-text,var(--a-text-action-hover))}.navds-read-more__button:active{background-color:var(--ac-read-more-active-bg,var(--a-surface-active))}.navds-read-more__button:focus-visible,.navds-read-more__content:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-read-more__button:focus,.navds-read-more__content:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-read-more__content{border-left:2px solid var(--ac-read-more-line,var(--a-border-divider));color:var(--a-text-default);margin-left:.8125rem;margin-top:var(--a-spacing-1);padding-left:.8125rem}.navds-read-more--small .navds-read-more__content{margin-left:.6875rem;padding-left:.6875rem}.navds-read-more__content--closed{display:none}.navds-read-more__expand-icon{flex-shrink:0;font-size:1.5rem}.navds-read-more--small .navds-read-more__expand-icon{font-size:1.25rem}.navds-read-more__button:hover>.navds-read-more__expand-icon{position:relative;top:1px}.navds-read-more--open>.navds-read-more__button>.navds-read-more__expand-icon{transform:rotate(-180deg)}.navds-read-more--open>.navds-read-more__button:hover>.navds-read-more__expand-icon{top:-1px}

package/dist/components.css

@@ -6957,7 +6957,8 @@ span.rdp-weeknumber {
     color: ButtonText;
   }
 
-  .navds-read-more__button.navds-read-more__button:focus-visible {
+  .navds-read-more__button.navds-read-more__button:focus-visible,
+  .navds-read-more__content.navds-read-more__content:focus-visible {
     box-shadow: none;
     outline: 2px solid highlight;
     outline-offset: 2px;
@@ -6973,13 +6974,15 @@ span.rdp-weeknumber {
   background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
 }
 
-.navds-read-more__button:focus-visible {
+.navds-read-more__button:focus-visible,
+.navds-read-more__content:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
-  .navds-read-more__button:focus {
+  .navds-read-more__button:focus,
+  .navds-read-more__content:focus {
     outline: none;
     box-shadow: var(--a-shadow-focus);
   }
@@ -7134,7 +7137,10 @@ span.rdp-weeknumber {
   }
 
 .navds-process__event[data-status="active"] .navds-process__bullet {
-    outline: 4px solid var(--a-surface-alt-3-subtle);
+    z-index: 1;
+    box-shadow: 0 0 0 2px var(--a-surface-default);
+    outline: 2px solid var(--a-surface-alt-3);
+    outline-offset: 2px;
   }
 
 .navds-process__event[data-status="uncompleted"] .navds-process__bullet {
@@ -7171,6 +7177,11 @@ span.rdp-weeknumber {
     outline-color: ButtonText;
     background-color: ButtonText;
     color: ButtonFace;
+    forced-color-adjust: none;
+  }
+
+  .navds-process__event[data-status="active"] .navds-process__bullet {
+    box-shadow: 0 0 0 2px Canvas;
   }
 
   .navds-process__event:is([data-status="active"]) .navds-process__line {