@navikt/ds-css 7.32.5 → 7.33.1

package/dist/darkside/component/process.css

@@ -22,7 +22,11 @@
     margin-block-start: calc((var(--__axc-process-circle-small) / 2) * -1);
   }
 
-  .aksel-process__event[data-dot="true"] .aksel-process__line {
+  .aksel-process__event[data-dot="true"] .aksel-process__line[data-position="start"] {
+    margin-block-end: calc(var(--__axc-process-circle-size) / 2 * -1);
+  }
+
+  .aksel-process__event[data-dot="true"] .aksel-process__line[data-position="end"] {
     margin-block-start: calc(var(--__axc-process-circle-size) / 2);
   }
 
@@ -34,28 +38,60 @@
   .aksel-process__line {
     border: calc(var(--__axc-process-border-width) / 2) solid;
     border-color: var(--ax-border-neutral-subtle);
-    grid-area: line-2 / 1;
+    grid-column: 1;
     justify-self: center;
     width: 0;
     min-height: 2rem;
   }
 
+  .aksel-process__line[data-position="start"] {
+    grid-row: line-1;
+  }
+
+  .aksel-process__event[data-status="active"] .aksel-process__line[data-position="start"] {
+    border-image: unset;
+  }
+
+  .aksel-process__event:first-of-type .aksel-process__line[data-position="start"] {
+    border-start-start-radius: var(--ax-radius-4);
+    border-start-end-radius: var(--ax-radius-4);
+    min-height: 1.5rem;
+  }
+
+  .aksel-process__event:not(:first-of-type) .aksel-process__line[data-position="start"], .aksel-process:not([data-truncated="start"], [data-truncated="both"]) .aksel-process__line[data-position="start"] {
+    display: none;
+  }
+
+  .aksel-process__line[data-position="end"] {
+    grid-row: line-2;
+  }
+
+  .aksel-process:not([data-truncated="end"], [data-truncated="both"]) .aksel-process__event:last-of-type .aksel-process__line[data-position="end"] {
+    display: none;
+  }
+
+  .aksel-process__event:last-of-type .aksel-process__line[data-position="end"] {
+    border-end-end-radius: var(--ax-radius-4);
+    border-end-start-radius: var(--ax-radius-4);
+    min-height: 1.5rem;
+  }
+
   .aksel-process__event[data-status="active"] .aksel-process__line {
     border-color: var(--ax-border-default);
     border-image: linear-gradient(to bottom, var(--ax-border-default) 50%, var(--ax-border-neutral-subtle) 90%);
     border-image-slice: 1;
   }
 
+  .aksel-process__event[data-status="active"]:last-of-type .aksel-process__line {
+    border-image: unset;
+  }
+
   .aksel-process__event[data-status="completed"] .aksel-process__line {
     border-color: var(--ax-border-default);
   }
 
   .aksel-process__event:not([data-status="active"]) .aksel-process__line {
-    border-image: ;
-  }
-
-  .aksel-process__event:last-of-type .aksel-process__line {
-    display: none;
+    border-image: unset;
   }
 
   .aksel-process__item {
@@ -150,7 +186,7 @@
     }
 
     .aksel-process__event[data-status="active"] .aksel-process__line {
-      border-image: ;
+      border-image: unset;
     }
   }
 }

package/dist/darkside/component/process.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-process{--__axc-process-circle-base: 2rem;--__axc-process-circle-large: var(--__axc-process-circle-base);--__axc-process-circle-small: 1rem;--__axc-process-circle-size: var(--__axc-process-circle-large);--__axc-process-border-width: 2px;margin:0;padding:0;list-style:none}.aksel-process__event{grid-template-rows:[line-1] auto [step-start] var(--__axc-process-circle-size) [line-2 step-end] auto;grid-template-columns:var(--__axc-process-circle-base) auto;justify-items:flex-start;display:grid}.aksel-process__event[data-dot=true]{--__axc-process-circle-size: var(--__axc-process-circle-small);margin-block-start:calc((var(--__axc-process-circle-small) / 2) * -1)}.aksel-process__event[data-dot=true] .aksel-process__line{margin-block-start:calc(var(--__axc-process-circle-size) / 2)}.aksel-process__event[data-dot=true] .aksel-process__bullet{--__axc-process-circle-size: var(--__axc-process-circle-small);margin-top:calc((var(--__axc-process-circle-large) - var(--__axc-process-circle-small)) / 2)}.aksel-process__line{border:calc(var(--__axc-process-border-width) / 2) solid;border-color:var(--ax-border-neutral-subtle);grid-area:line-2 / 1;justify-self:center;width:0;min-height:2rem}.aksel-process__event[data-status=active] .aksel-process__line{border-color:var(--ax-border-default);border-image:linear-gradient(to bottom,var(--ax-border-default) 50%,var(--ax-border-neutral-subtle) 90%);border-image-slice:1}.aksel-process__event[data-status=completed] .aksel-process__line{border-color:var(--ax-border-default)}.aksel-process__event:not([data-status=active]) .aksel-process__line{border-image:}.aksel-process__event:last-of-type .aksel-process__line{display:none}.aksel-process__item{grid-area:2 / 1 / -1 / -1;grid-template-columns:[bullet] var(--__axc-process-circle-base) [content] auto;gap:var(--ax-space-16);padding:var(--__axc-process-border-width);margin:calc(var(--__axc-process-border-width) * -1) calc(var(--__axc-process-border-width) * -1) var(--ax-space-16);justify-content:flex-start;width:100%;display:grid}.aksel-process__event:last-child .aksel-process__item{margin-bottom:0}.aksel-process__bullet{width:var(--__axc-process-circle-size);height:var(--__axc-process-circle-size);border-radius:var(--ax-radius-full);border:var(--__axc-process-border-width) solid;color:var(--ax-text-neutral-subtle);border-color:var(--ax-border-neutral-subtleA);grid-column:bullet;place-self:baseline center;place-items:center;line-height:1;transition-property:background,border-color;transition-duration:70ms;transition-timing-function:linear;display:inline-grid}.aksel-process__bullet svg{height:min(calc(var(--__axc-process-circle-size) * .75),1.5rem);width:min(calc(var(--__axc-process-circle-size) * .75),1.5rem)}.aksel-process__event:is([data-status=completed],[data-status=active]) .aksel-process__bullet{color:var(--ax-text-contrast);background:var(--ax-bg-strong);border-color:#0000}.aksel-process__event[data-status=active] .aksel-process__bullet{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] .aksel-process__bullet{transition:none}.aksel-process__body{grid-column:content}.aksel-process__title{padding-block:.16rem var(--ax-space-4)}.aksel-process__event[data-status=active] .aksel-process__title:has(+.aksel-process__active-label){padding-block-end:0}.aksel-process__active-label{margin-block:0 var(--ax-space-4);color:var(--ax-text-subtle)}.aksel-process__active-label:last-of-type{margin-block-end:0}@media(forced-colors:active){.aksel-process__bullet{transition:none}.aksel-process__event:is([data-status=completed],[data-status=active]) .aksel-process__bullet{color:buttonface;forced-color-adjust:none;background-color:buttontext;outline-color:buttontext}.aksel-process__event[data-status=active] .aksel-process__bullet{box-shadow:0 0 0 2px canvas}.aksel-process__event[data-status=active] .aksel-process__line{border-image:}}}
+@layer aksel.components{.aksel-process{--__axc-process-circle-base: 2rem;--__axc-process-circle-large: var(--__axc-process-circle-base);--__axc-process-circle-small: 1rem;--__axc-process-circle-size: var(--__axc-process-circle-large);--__axc-process-border-width: 2px;margin:0;padding:0;list-style:none}.aksel-process__event{grid-template-rows:[line-1] auto [step-start] var(--__axc-process-circle-size) [line-2 step-end] auto;grid-template-columns:var(--__axc-process-circle-base) auto;justify-items:flex-start;display:grid}.aksel-process__event[data-dot=true]{--__axc-process-circle-size: var(--__axc-process-circle-small);margin-block-start:calc((var(--__axc-process-circle-small) / 2) * -1)}.aksel-process__event[data-dot=true] .aksel-process__line[data-position=start]{margin-block-end:calc(var(--__axc-process-circle-size) / 2 * -1)}.aksel-process__event[data-dot=true] .aksel-process__line[data-position=end]{margin-block-start:calc(var(--__axc-process-circle-size) / 2)}.aksel-process__event[data-dot=true] .aksel-process__bullet{--__axc-process-circle-size: var(--__axc-process-circle-small);margin-top:calc((var(--__axc-process-circle-large) - var(--__axc-process-circle-small)) / 2)}.aksel-process__line{border:calc(var(--__axc-process-border-width) / 2) solid;border-color:var(--ax-border-neutral-subtle);grid-column:1;justify-self:center;width:0;min-height:2rem}.aksel-process__line[data-position=start]{grid-row:line-1}.aksel-process__event[data-status=active] .aksel-process__line[data-position=start]{border-image:unset}.aksel-process__event:first-of-type .aksel-process__line[data-position=start]{border-start-start-radius:var(--ax-radius-4);border-start-end-radius:var(--ax-radius-4);min-height:1.5rem}.aksel-process__event:not(:first-of-type) .aksel-process__line[data-position=start],.aksel-process:not([data-truncated=start],[data-truncated=both]) .aksel-process__line[data-position=start]{display:none}.aksel-process__line[data-position=end]{grid-row:line-2}.aksel-process:not([data-truncated=end],[data-truncated=both]) .aksel-process__event:last-of-type .aksel-process__line[data-position=end]{display:none}.aksel-process__event:last-of-type .aksel-process__line[data-position=end]{border-end-end-radius:var(--ax-radius-4);border-end-start-radius:var(--ax-radius-4);min-height:1.5rem}.aksel-process__event[data-status=active] .aksel-process__line{border-color:var(--ax-border-default);border-image:linear-gradient(to bottom,var(--ax-border-default) 50%,var(--ax-border-neutral-subtle) 90%);border-image-slice:1}.aksel-process__event[data-status=active]:last-of-type .aksel-process__line{border-image:unset}.aksel-process__event[data-status=completed] .aksel-process__line{border-color:var(--ax-border-default)}.aksel-process__event:not([data-status=active]) .aksel-process__line{border-image:unset}.aksel-process__item{grid-area:2 / 1 / -1 / -1;grid-template-columns:[bullet] var(--__axc-process-circle-base) [content] auto;gap:var(--ax-space-16);padding:var(--__axc-process-border-width);margin:calc(var(--__axc-process-border-width) * -1) calc(var(--__axc-process-border-width) * -1) var(--ax-space-16);justify-content:flex-start;width:100%;display:grid}.aksel-process__event:last-child .aksel-process__item{margin-bottom:0}.aksel-process__bullet{width:var(--__axc-process-circle-size);height:var(--__axc-process-circle-size);border-radius:var(--ax-radius-full);border:var(--__axc-process-border-width) solid;color:var(--ax-text-neutral-subtle);border-color:var(--ax-border-neutral-subtleA);grid-column:bullet;place-self:baseline center;place-items:center;line-height:1;transition-property:background,border-color;transition-duration:70ms;transition-timing-function:linear;display:inline-grid}.aksel-process__bullet svg{height:min(calc(var(--__axc-process-circle-size) * .75),1.5rem);width:min(calc(var(--__axc-process-circle-size) * .75),1.5rem)}.aksel-process__event:is([data-status=completed],[data-status=active]) .aksel-process__bullet{color:var(--ax-text-contrast);background:var(--ax-bg-strong);border-color:#0000}.aksel-process__event[data-status=active] .aksel-process__bullet{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] .aksel-process__bullet{transition:none}.aksel-process__body{grid-column:content}.aksel-process__title{padding-block:.16rem var(--ax-space-4)}.aksel-process__event[data-status=active] .aksel-process__title:has(+.aksel-process__active-label){padding-block-end:0}.aksel-process__active-label{margin-block:0 var(--ax-space-4);color:var(--ax-text-subtle)}.aksel-process__active-label:last-of-type{margin-block-end:0}@media(forced-colors:active){.aksel-process__bullet{transition:none}.aksel-process__event:is([data-status=completed],[data-status=active]) .aksel-process__bullet{color:buttonface;forced-color-adjust:none;background-color:buttontext;outline-color:buttontext}.aksel-process__event[data-status=active] .aksel-process__bullet{box-shadow:0 0 0 2px canvas}.aksel-process__event[data-status=active] .aksel-process__line{border-image:unset}}}

package/dist/darkside/components.css

@@ -5285,7 +5285,11 @@
     margin-block-start: calc((var(--__axc-process-circle-small) / 2) * -1);
   }
 
-  .aksel-process__event[data-dot="true"] .aksel-process__line {
+  .aksel-process__event[data-dot="true"] .aksel-process__line[data-position="start"] {
+    margin-block-end: calc(var(--__axc-process-circle-size) / 2 * -1);
+  }
+
+  .aksel-process__event[data-dot="true"] .aksel-process__line[data-position="end"] {
     margin-block-start: calc(var(--__axc-process-circle-size) / 2);
   }
 
@@ -5297,28 +5301,60 @@
   .aksel-process__line {
     border: calc(var(--__axc-process-border-width) / 2) solid;
     border-color: var(--ax-border-neutral-subtle);
-    grid-area: line-2 / 1;
+    grid-column: 1;
     justify-self: center;
     width: 0;
     min-height: 2rem;
   }
 
+  .aksel-process__line[data-position="start"] {
+    grid-row: line-1;
+  }
+
+  .aksel-process__event[data-status="active"] .aksel-process__line[data-position="start"] {
+    border-image: unset;
+  }
+
+  .aksel-process__event:first-of-type .aksel-process__line[data-position="start"] {
+    border-start-start-radius: var(--ax-radius-4);
+    border-start-end-radius: var(--ax-radius-4);
+    min-height: 1.5rem;
+  }
+
+  .aksel-process__event:not(:first-of-type) .aksel-process__line[data-position="start"], .aksel-process:not([data-truncated="start"], [data-truncated="both"]) .aksel-process__line[data-position="start"] {
+    display: none;
+  }
+
+  .aksel-process__line[data-position="end"] {
+    grid-row: line-2;
+  }
+
+  .aksel-process:not([data-truncated="end"], [data-truncated="both"]) .aksel-process__event:last-of-type .aksel-process__line[data-position="end"] {
+    display: none;
+  }
+
+  .aksel-process__event:last-of-type .aksel-process__line[data-position="end"] {
+    border-end-end-radius: var(--ax-radius-4);
+    border-end-start-radius: var(--ax-radius-4);
+    min-height: 1.5rem;
+  }
+
   .aksel-process__event[data-status="active"] .aksel-process__line {
     border-color: var(--ax-border-default);
     border-image: linear-gradient(to bottom, var(--ax-border-default) 50%, var(--ax-border-neutral-subtle) 90%);
     border-image-slice: 1;
   }
 
+  .aksel-process__event[data-status="active"]:last-of-type .aksel-process__line {
+    border-image: unset;
+  }
+
   .aksel-process__event[data-status="completed"] .aksel-process__line {
     border-color: var(--ax-border-default);
   }
 
   .aksel-process__event:not([data-status="active"]) .aksel-process__line {
-    border-image: ;
-  }
-
-  .aksel-process__event:last-of-type .aksel-process__line {
-    display: none;
+    border-image: unset;
   }
 
   .aksel-process__item {
@@ -5413,7 +5449,7 @@
     }
 
     .aksel-process__event[data-status="active"] .aksel-process__line {
-      border-image: ;
+      border-image: unset;
     }
   }