@navikt/ds-css 6.7.1 → 6.9.0

package/form/combobox.css

@@ -1,18 +1,41 @@
 .navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.5rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-2);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-3);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-3);
+  --__ac-combobox-border-width: 1px;
+  --__ac-combobox-input-height: 2rem;
+
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
 }
 
-.navds-combobox__wrapper-inner {
+.navds-form-field--small .navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.25rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-1);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-1-alt);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-2);
+  --__ac-combobox-input-height: 1.5rem;
+}
+
+.navds-combobox__button-clear svg,
+.navds-combobox__button-toggle-list svg,
+.navds-combobox__list svg {
+  width: var(--__ac-combobox-icon-size);
+  height: var(--__ac-combobox-icon-size);
+}
+
+.navds-combobox__wrapper-inner.navds-text-field__input {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: calc(var(--a-spacing-2) - 2px) var(--a-spacing-2);
+  padding-block: calc(var(--__ac-combobox-wrapper-inner-padding) - var(--__ac-combobox-border-width));
+  padding-inline: var(--__ac-combobox-wrapper-inner-padding);
 }
 
 .navds-combobox__wrapper-inner > :first-child {
@@ -24,10 +47,6 @@
   flex-flow: row nowrap;
 }
 
-.navds-form-field--small .navds-combobox__wrapper-inner {
-  padding: var(--a-spacing-1) calc(var(--a-spacing-3) / 2);
-}
-
 .navds-combobox__wrapper-inner:hover {
   cursor: text;
 }
@@ -47,7 +66,7 @@
 }
 
 .navds-combobox__selected-options {
-  gap: var(--a-spacing-2);
+  gap: var(--__ac-combobox-wrapper-inner-padding);
   align-items: center;
 }
 
@@ -82,7 +101,7 @@
   margin: 0;
   min-width: 10ch;
   width: 100%;
-  height: 2rem;
+  height: var(--__ac-combobox-input-height);
 }
 
 .navds-combobox__input:focus-visible {
@@ -147,11 +166,6 @@
   padding: 0;
 }
 
-.navds-combobox__button-clear svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
 .navds-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
@@ -197,18 +211,6 @@
   }
 }
 
-.navds-combobox__button-toggle-list svg {
-  width: 1.5rem;
-  height: 1.5rem;
-  pointer-events: none;
-}
-
-.navds-form-field--small .navds-combobox__button-toggle-list svg,
-.navds-form-field--small .navds-combobox__button-clear svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 /* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
@@ -226,18 +228,12 @@
   border-radius: var(--a-border-radius-medium);
   background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
   color: var(--ac-combobox-list-text, var(--a-text-default));
-  gap: var(--a-spacing-1) 0;
 }
 
 .navds-combobox__list--closed {
   display: none;
 }
 
-.navds-combobox__list svg {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-
 .navds-combobox__list_non-selectables {
   position: sticky;
   top: 0;
@@ -251,23 +247,17 @@
 .navds-combobox__list-item--no-options,
 .navds-combobox__list-item--new-option,
 .navds-combobox__list-item--max-selected {
+  align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding: var(--a-spacing-3);
+  padding-block: var(--__ac-combobox-list-item-padding-block);
+  padding-inline: var(--__ac-combobox-list-item-padding-inline);
   width: 100%;
   background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
   scroll-margin-top: 50px;
 }
 
-.navds-form-field--small .navds-combobox__list-item,
-.navds-form-field--small .navds-combobox__list-item--loading,
-.navds-form-field--small .navds-combobox__list-item--no-options,
-.navds-form-field--small .navds-combobox__list-item--new-option,
-.navds-form-field--small .navds-combobox__list-item--max-selected {
-  padding: calc(var(--a-spacing-3) / 2) var(--a-spacing-2);
-}
-
 .navds-combobox__list-item--loading {
   justify-content: center;
   background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
@@ -278,7 +268,6 @@
   border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
   border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
   border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
-  margin-bottom: calc(var(--a-spacing-1) * -1);
 }
 
 .navds-combobox__list_non-selectables:hover {
@@ -305,12 +294,7 @@
   background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
   cursor: pointer;
   border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
-  padding-left: calc(var(--a-spacing-3) - 4px);
-}
-
-.navds-form-field--small .navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover .navds-form-field--small .navds-combobox__list-item:hover {
-  padding-left: calc(var(--a-spacing-2) - 4px);
+  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
 }
 
 .navds-combobox__list-item[data-no-focus="true"] {
@@ -330,7 +314,6 @@
 .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
   background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
   border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
-  padding-left: calc(var(--a-spacing-3) - 4px);
 }
 
 .navds-combobox__list-item--new-option {

package/form/form-progress.css

@@ -0,0 +1,52 @@
+.navds-form-progress__bar {
+  margin-bottom: var(--a-spacing-2);
+}
+
+.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
+.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
+  display: none;
+}
+
+.navds-form-progress__button:hover svg {
+  transform: translateY(1px);
+}
+
+.navds-form-progress__button[data-state="open"] svg {
+  transform: rotate(-180deg);
+}
+
+.navds-form-progress__button[data-state="open"]:hover svg {
+  transform: translateY(-1px) rotate(-180deg);
+}
+
+.navds-form-progress__collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
+}
+
+.navds-form-progress__collapsible[hidden] {
+  display: grid;
+}
+
+.navds-form-progress__collapsible[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+
+.navds-form-progress__collapsible-content {
+  min-height: 0;
+  transition: visibility 0.3s;
+  visibility: hidden;
+}
+
+.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
+  visibility: visible;
+}
+
+.navds-form-progress__stepper {
+  border: 2px solid var(--a-border-subtle);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-2) var(--a-spacing-4) 0;
+  margin-top: var(--a-spacing-1);
+}

package/form/index.css

@@ -14,3 +14,4 @@
 @import "search.css";
 @import "combobox.css";
 @import "form-summary.css";
+@import "form-progress.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "6.7.1",
+  "version": "6.9.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^6.7.1",
+    "@navikt/ds-tokens": "^6.9.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

package/primitives/hgrid.css

@@ -1,17 +1,17 @@
 .navds-hgrid {
   --__ac-hgrid-columns-xs: initial;
-  --__ac-hgrid-columns-sm: initial;
-  --__ac-hgrid-columns-md: initial;
-  --__ac-hgrid-columns-lg: initial;
-  --__ac-hgrid-columns-xl: initial;
-  --__ac-hgrid-columns-2xl: initial;
+  --__ac-hgrid-columns-sm: var(--__ac-hgrid-columns-xs);
+  --__ac-hgrid-columns-md: var(--__ac-hgrid-columns-sm);
+  --__ac-hgrid-columns-lg: var(--__ac-hgrid-columns-md);
+  --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
+  --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
   --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
   --__ac-hgrid-gap-xs: initial;
-  --__ac-hgrid-gap-sm: initial;
-  --__ac-hgrid-gap-md: initial;
-  --__ac-hgrid-gap-lg: initial;
-  --__ac-hgrid-gap-xl: initial;
-  --__ac-hgrid-gap-2xl: initial;
+  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
+  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
+  --__ac-hgrid-gap-lg: var(--__ac-hgrid-gap-md);
+  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
+  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
   --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
   --__ac-hgrid-align: initial;
 
@@ -23,56 +23,35 @@
 
 @media (min-width: 480px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
   }
 }
 
 @media (min-width: 768px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
   }
 }
 
 @media (min-width: 1024px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-lg,
-      var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
-    );
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
   }
 }
 
 @media (min-width: 1280px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-xl,
-      var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-xl,
-      var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-    );
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
   }
 }
 
 @media (min-width: 1440px) {
   .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-2xl,
-      var(
-        --__ac-hgrid-columns-xl,
-        var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-      )
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-2xl,
-      var(
-        --__ac-hgrid-gap-xl,
-        var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-      )
-    );
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
   }
 }

package/primitives/page.css

@@ -27,7 +27,7 @@
 }
 
 .navds-page__content--padding {
-  padding-block-end: var(--a-spacing-8);
+  padding-block-end: var(--a-spacing-16);
 }
 
 .navds-pageblock--text {