@navikt/ds-css 7.2.1 → 7.3.1

package/dropdown.css

@@ -13,7 +13,7 @@
   border-bottom: 1px solid var(--a-border-divider);
 }
 
-.navds-dropdown__menu > :not(.navds-dropdown__divider):not(.navds-dropdown__list) {
+.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
   margin: 0 var(--a-spacing-4) var(--a-spacing-3);
 }
 

package/form/combobox.css

@@ -81,13 +81,13 @@
   cursor: text;
 }
 
-.navds-combobox--error .navds-text-field__input:not(:hover):not(:disabled) {
+.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
   border-color: var(--ac-combobox-error-border, var(--a-border-danger));
   box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
 }
 
 .navds-combobox--error
-  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow:

package/form/fieldset.css

@@ -13,7 +13,7 @@
   min-width: 0;
 }
 
-.navds-fieldset > :not(:first-child):not(:empty) {
+.navds-fieldset > :not(:first-child, :empty) {
   margin-top: var(--a-spacing-2);
 }
 
@@ -26,7 +26,7 @@
 }
 
 /* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
+.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
   margin-top: 0;
 }
 

package/form/radio-checkbox.css

@@ -170,44 +170,42 @@
   color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
 
-.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 {
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked, :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 {
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
 }
 
-.navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
   box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :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)
+  > .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :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__input:focus:hover:not(:disabled, :checked, :indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :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)),
@@ -241,14 +239,10 @@
   color: var(--a-text-default);
 }
 
-.navds-checkbox--readonly
-  > .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)
-  + .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) + .navds-radio__label::before {
+.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
+.navds-radio--readonly > .navds-radio__input:hover:not(:checked, :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);
 }

package/form/search.css

@@ -186,12 +186,12 @@
 }
 
 /* Error-handling */
-.navds-search--error .navds-search__input:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:not(:hover, :disabled) {
   border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
   box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
 }
 
-.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
   box-shadow:
     inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
     var(--a-shadow-focus);
@@ -205,7 +205,7 @@
 }
 
 @supports not selector(:focus-visible) {
-  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
     box-shadow:
       inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
       var(--a-shadow-focus);

package/form/select.css

@@ -80,7 +80,7 @@
 /**
   Error handling
 */
-.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
+.navds-select--error > * select:not(:hover, :focus, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
   border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }

package/form/text-field.css

@@ -61,19 +61,19 @@
 /**
   Error handling
 */
-.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
   border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
   box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
 }
 
-.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
   box-shadow:
     0 0 0 1px var(--a-border-danger),
     var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
-  .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
     box-shadow:
       0 0 0 1px var(--a-border-danger),
       var(--a-shadow-focus);

package/form/textarea.css

@@ -111,13 +111,13 @@
 /**
   Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
 @supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
     box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
     border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   }

package/index.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+
 @import "baseline/index.css";
 @import "typography.css";
 @import "accordion.css";
@@ -8,6 +9,7 @@
 @import "chips.css";
 @import "copybutton.css";
 @import "dropdown.css";
+@import "action-menu.css";
 @import "expansioncard.css";
 @import "guide-panel.css";
 @import "form/index.css";

package/list.css

@@ -80,5 +80,6 @@ _:future,
 
 .navds-list__item-marker--icon {
   font-size: 1.5rem;
+  justify-content: center;
   color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
 }

package/modal.css

@@ -46,8 +46,9 @@
   /* From polyfill */
   position: fixed;
   top: 0;
-  right: 0;
   bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
   left: 0;
 }
 
@@ -96,8 +97,9 @@
   /* From polyfill: */
   position: fixed;
   top: 0;
-  right: 0;
   bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
   left: 0;
 }
 
@@ -176,7 +178,7 @@
 }
 
 @keyframes akselModalFadeIn {
-  from {
+  0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
     transform: translate3d(0, calc(5% + 4px), 0);
   }
@@ -185,7 +187,7 @@
     opacity: 1;
   }
 
-  to {
+  100% {
     transform: none;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "7.2.1",
+  "version": "7.3.1",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,11 +27,11 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^7.2.1",
+    "@navikt/ds-tokens": "^7.3.1",
     "autoprefixer": "^10.4.20",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
-    "lodash": "4.17.21",
+    "lodash": "^4.17.21",
     "nodemon": "^3.0.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.31",

package/primitives/stack.css

@@ -56,8 +56,7 @@
 
 .navds-stack__spacer {
   flex: 1;
-  justify-self: stretch;
-  align-self: stretch;
+  place-content: stretch stretch;
 }
 
 .navds-stack > .navds-stack__spacer {

package/stepper.css

@@ -203,8 +203,7 @@ button.navds-stepper__step {
   grid-template-columns:
     [content-start] auto [circle] var(--navds-stepper-circle-size)
     [content-end] auto;
-  justify-items: center;
-  align-items: center;
+  place-items: center center;
   margin-bottom: 0;
 }
 

package/toggle-group.css

@@ -172,7 +172,7 @@
   }
 
   .navds-toggle-group__button:active {
-    background-color: none !important;
+    background-color: unset !important;
   }
 
   .navds-toggle-group__button:focus-visible {