@navikt/ds-css 8.10.2 → 8.10.4

package/dist/component/form.css

@@ -102,10 +102,7 @@
       var(--__axc-dropzone-animation-ease-out);
     margin: -1px;
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
   }
 
   @keyframes akselDropzoneDragoverAnimation {
@@ -185,25 +182,7 @@
     display: flex;
   }
 
-  li.aksel-file-item {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .aksel-file-upload :-webkit-any(ul, li) {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .aksel-file-upload :is(ul, li) {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  ul:has( > li.aksel-file-item) {
+  .aksel-file-upload :is(ul, li), ul:has( > li.aksel-file-item), li.aksel-file-item {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -224,7 +203,6 @@
   .aksel-file-item__link {
     align-items: flex-start;
     gap: var(--ax-space-2);
-    width: -webkit-fit-content;
     width: fit-content;
     display: flex;
   }
@@ -324,11 +302,7 @@
     outline-offset: 3px;
   }
 
-  .aksel-error-summary:focus-visible {
-    outline: 3px solid var(--ax-border-focus);
-  }
-
-  .aksel-error-summary:has(.aksel-error-summary__heading:focus-visible) {
+  .aksel-error-summary:focus-visible, .aksel-error-summary:has(.aksel-error-summary__heading:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
   }
 
@@ -393,27 +367,14 @@
       border-color: orange;
       border-left-style: solid;
       border-left-width: 8px;
+      border-start-start-radius: calc(var(--ax-radius-8) - 1px);
+      border-end-start-radius: calc(var(--ax-radius-8) - 1px);
       height: 100%;
       position: absolute;
       top: 0;
       left: 0;
     }
 
-    .aksel-confirmation-panel__inner:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
-      border-top-left-radius: calc(var(--ax-radius-8) - 1px);
-      border-bottom-left-radius: calc(var(--ax-radius-8) - 1px);
-    }
-
-    .aksel-confirmation-panel__inner:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
-      border-top-right-radius: calc(var(--ax-radius-8) - 1px);
-      border-bottom-right-radius: calc(var(--ax-radius-8) - 1px);
-    }
-
-    .aksel-confirmation-panel__inner:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
-      border-top-right-radius: calc(var(--ax-radius-8) - 1px);
-      border-bottom-right-radius: calc(var(--ax-radius-8) - 1px);
-    }
-
     .aksel-confirmation-panel--checked .aksel-confirmation-panel__inner:before {
       border-color: green;
     }
@@ -425,7 +386,6 @@
 
   .aksel-checkbox, .aksel-radio {
     gap: var(--ax-space-2) 0;
-    width: -webkit-fit-content;
     width: fit-content;
     padding: var(--ax-space-12) 0;
     grid-template-columns: auto 1fr;
@@ -490,7 +450,6 @@
 
   .aksel-checkbox__input, .aksel-radio__input {
     --__axc-radio-checkbox-marker-border: 2px;
-    -webkit-appearance: none;
     appearance: none;
     cursor: pointer;
     width: var(--__axc-radio-checkbox-marker-size);
@@ -502,12 +461,7 @@
     position: relative;
   }
 
-  :is(.aksel-checkbox__input, .aksel-radio__input)[data-standalone="true"]:disabled {
-    opacity: var(--ax-opacity-disabled);
-    cursor: not-allowed;
-  }
-
-  .aksel-checkbox__input-wrapper[data-standalone="true"] > :is(.aksel-checkbox__input, .aksel-radio__input):disabled {
+  :is(.aksel-checkbox__input, .aksel-radio__input)[data-standalone="true"]:disabled, .aksel-checkbox__input-wrapper[data-standalone="true"] > :is(.aksel-checkbox__input, .aksel-radio__input):disabled {
     opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
   }
@@ -615,19 +569,11 @@
     opacity: var(--ax-opacity-disabled);
   }
 
-  .aksel-checkbox--disabled :where(.aksel-checkbox__input, .aksel-checkbox__label) {
+  .aksel-checkbox--disabled :where(.aksel-checkbox__input, .aksel-checkbox__label), .aksel-radio--disabled > :where(.aksel-radio__input, .aksel-radio__label) {
     cursor: not-allowed;
   }
 
-  .aksel-radio--disabled > :where(.aksel-radio__input, .aksel-radio__label) {
-    cursor: not-allowed;
-  }
-
-  .aksel-checkbox--readonly :where(.aksel-checkbox__input, .aksel-checkbox__label) {
-    cursor: default;
-  }
-
-  .aksel-radio--readonly > :where(.aksel-radio__input, .aksel-radio__label) {
+  .aksel-checkbox--readonly :where(.aksel-checkbox__input, .aksel-checkbox__label), .aksel-radio--readonly > :where(.aksel-radio__input, .aksel-radio__label) {
     cursor: default;
   }
 
@@ -661,19 +607,11 @@
   }
 
   @media screen and (forced-colors: active) {
-    :-webkit-any(.aksel-checkbox, .aksel-checkbox--readonly) .aksel-checkbox__input:indeterminate:after {
-      background-color: fieldtext;
-    }
-
     :is(.aksel-checkbox, .aksel-checkbox--readonly) .aksel-checkbox__input:indeterminate:after {
       background-color: fieldtext;
     }
 
-    .aksel-radio:not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) + .aksel-radio__label {
-      color: highlight;
-    }
-
-    .aksel-checkbox:not(.aksel-checkbox--readonly):has(.aksel-checkbox__input:hover:not(:disabled)) > .aksel-checkbox__label {
+    .aksel-checkbox:not(.aksel-checkbox--readonly):has(.aksel-checkbox__input:hover:not(:disabled)) > .aksel-checkbox__label, .aksel-radio:not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) + .aksel-radio__label {
       color: highlight;
     }
 
@@ -706,15 +644,7 @@
       background-color: graytext;
     }
 
-    .aksel-checkbox--disabled :is(.aksel-checkbox__label, .aksel-checkbox__description, .aksel-checkbox__input:checked + .aksel-checkbox__icon) {
-      color: graytext;
-    }
-
-    .aksel-radio--disabled :-webkit-any(.aksel-radio__label, .aksel-radio__description) {
-      color: graytext;
-    }
-
-    .aksel-radio--disabled :is(.aksel-radio__label, .aksel-radio__description) {
+    .aksel-checkbox--disabled :is(.aksel-checkbox__label, .aksel-checkbox__description, .aksel-checkbox__input:checked + .aksel-checkbox__icon), .aksel-radio--disabled :is(.aksel-radio__label, .aksel-radio__description) {
       color: graytext;
     }
   }
@@ -746,7 +676,6 @@
   }
 
   .aksel-select__input {
-    -webkit-appearance: none;
     appearance: none;
     background-color: var(--ax-bg-input);
     border-radius: var(--ax-radius-8);
@@ -805,21 +734,10 @@
 
   .aksel-form-field--small .aksel-select__input {
     min-height: 2rem;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .aksel-select--error > * select {
-    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
-    border-color: var(--ax-border-danger-strong);
-  }
-
-  .aksel-select--error > * select:hover {
-    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
-    border-color: var(--ax-border-danger-strong);
+    padding-block: 0;
   }
 
-  .aksel-select--error > * select:focus {
+  .aksel-select--error > * select, .aksel-select--error > * select:hover, .aksel-select--error > * select:focus {
     box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
     border-color: var(--ax-border-danger-strong);
   }
@@ -850,12 +768,6 @@
   }
 
   @media (forced-colors: active) {
-    .aksel-select--readonly .aksel-select__input:-webkit-any(:hover, :focus) {
-      color: buttontext;
-      background-color: buttonface;
-      border-color: buttontext;
-    }
-
     .aksel-select--readonly .aksel-select__input:is(:hover, :focus) {
       color: buttontext;
       background-color: buttonface;
@@ -868,7 +780,6 @@
   }
 
   .aksel-switch {
-    width: -webkit-fit-content;
     width: fit-content;
     min-height: 3rem;
     position: relative;
@@ -1047,18 +958,12 @@
     width: auto;
   }
 
-  .aksel-switch--right .aksel-switch__input {
-    left: auto;
-    right: 0;
-  }
-
-  .aksel-switch--right .aksel-switch__track {
+  .aksel-switch--right .aksel-switch__input, .aksel-switch--right .aksel-switch__track {
     left: auto;
     right: 0;
   }
 
   .aksel-switch__input:disabled {
-    -webkit-appearance: none;
     appearance: none;
   }
 
@@ -1070,31 +975,12 @@
     cursor: not-allowed;
   }
 
-  .aksel-switch--readonly > .aksel-switch__track {
+  .aksel-switch--readonly > .aksel-switch__track, .aksel-switch--readonly > .aksel-switch__input:hover ~ .aksel-switch__track, .aksel-switch--readonly > .aksel-switch__input:checked ~ .aksel-switch__track, .aksel-switch--readonly > .aksel-switch__input:checked:hover ~ .aksel-switch__track {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
   }
 
-  .aksel-switch--readonly > .aksel-switch__input:hover ~ .aksel-switch__track {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
-  }
-
-  .aksel-switch--readonly > .aksel-switch__input:checked ~ .aksel-switch__track {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
-  }
-
-  .aksel-switch--readonly > .aksel-switch__input:checked:hover ~ .aksel-switch__track {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
-  }
-
-  .aksel-switch--readonly > .aksel-switch__label-wrapper {
-    cursor: default;
-  }
-
-  .aksel-switch--readonly > .aksel-switch__input {
+  .aksel-switch--readonly > .aksel-switch__label-wrapper, .aksel-switch--readonly > .aksel-switch__input {
     cursor: default;
   }
 
@@ -1156,7 +1042,6 @@
   }
 
   .aksel-text-field__input {
-    -webkit-appearance: none;
     appearance: none;
     padding: var(--ax-space-8);
     background: var(--ax-bg-input);
@@ -1233,7 +1118,6 @@
 
   .aksel-textarea__input {
     height: var(--__axc-textarea-height);
-    -webkit-appearance: none;
     appearance: none;
     padding: var(--ax-space-8);
     background-color: var(--ax-bg-input);
@@ -1296,50 +1180,17 @@
 
   .aksel-textarea--resize-both .aksel-textarea__input {
     resize: both;
-  }
-
-  .aksel-textarea--resize-both .aksel-textarea__input:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-    border-bottom-right-radius: 0;
-  }
-
-  .aksel-textarea--resize-both .aksel-textarea__input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-    border-bottom-left-radius: 0;
-  }
-
-  .aksel-textarea--resize-both .aksel-textarea__input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-    border-bottom-left-radius: 0;
+    border-end-end-radius: 0;
   }
 
   .aksel-textarea--resize-horizontal .aksel-textarea__input {
     resize: horizontal;
-  }
-
-  .aksel-textarea--resize-horizontal .aksel-textarea__input:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-    border-bottom-right-radius: 0;
-  }
-
-  .aksel-textarea--resize-horizontal .aksel-textarea__input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-    border-bottom-left-radius: 0;
-  }
-
-  .aksel-textarea--resize-horizontal .aksel-textarea__input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-    border-bottom-left-radius: 0;
+    border-end-end-radius: 0;
   }
 
   .aksel-textarea--resize-vertical .aksel-textarea__input {
     resize: vertical;
-  }
-
-  .aksel-textarea--resize-vertical .aksel-textarea__input:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-    border-bottom-right-radius: 0;
-  }
-
-  .aksel-textarea--resize-vertical .aksel-textarea__input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-    border-bottom-left-radius: 0;
-  }
-
-  .aksel-textarea--resize-vertical .aksel-textarea__input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
-    border-bottom-left-radius: 0;
+    border-end-end-radius: 0;
   }
 
   .aksel-textarea--autoscrollbar, .aksel-textarea--autoscrollbar .aksel-textarea__wrapper {
@@ -1382,7 +1233,6 @@
   }
 
   .aksel-search--with-size .aksel-search__wrapper {
-    width: -webkit-fit-content;
     width: fit-content;
   }
 
@@ -1405,13 +1255,7 @@
     outline: none;
   }
 
-  .aksel-search__input.aksel-search__input--primary {
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .aksel-search__input.aksel-search__input--secondary {
+  .aksel-search__input.aksel-search__input--primary, .aksel-search__input.aksel-search__input--secondary {
     border-right: none;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -1479,10 +1323,6 @@
     --__axc-button-border-color: var(--ax-border-strong);
   }
 
-  .aksel-search:not(.aksel-search--error, .aksel-search--disabled) .aksel-search__wrapper:has(.aksel-search__input:-webkit-any(:hover, :focus-visible)) .aksel-search__button-search[data-variant="secondary"]:not(:hover, :active) {
-    --__axc-button-border-color: var(--ax-border-strong);
-  }
-
   .aksel-search:not(.aksel-search--error, .aksel-search--disabled) .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible)) .aksel-search__button-search[data-variant="secondary"]:not(:hover, :active) {
     --__axc-button-border-color: var(--ax-border-strong);
   }
@@ -1497,11 +1337,7 @@
     box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 
-  .aksel-search__input:focus-visible {
-    z-index: 1;
-  }
-
-  .aksel-search__button-search:focus-visible {
+  .aksel-search__input:focus-visible, .aksel-search__button-search:focus-visible {
     z-index: 1;
   }
 
@@ -1524,10 +1360,6 @@
     position: relative;
   }
 
-  .aksel-form-field:not(:-webkit-any(.aksel-combobox--disabled, .aksel-combobox--readonly)) .aksel-combobox__wrapper:hover {
-    border-color: var(--ax-border-strong);
-  }
-
   .aksel-form-field:not(:is(.aksel-combobox--disabled, .aksel-combobox--readonly)) .aksel-combobox__wrapper:hover {
     border-color: var(--ax-border-strong);
   }
@@ -1552,11 +1384,7 @@
     cursor: not-allowed;
   }
 
-  .aksel-combobox--disabled .aksel-combobox__selected-options {
-    pointer-events: none;
-  }
-
-  .aksel-combobox--disabled .aksel-combobox--readonly {
+  .aksel-combobox--disabled .aksel-combobox__selected-options, .aksel-combobox--disabled .aksel-combobox--readonly {
     pointer-events: none;
   }
 
@@ -1577,11 +1405,7 @@
     overflow: clip;
   }
 
-  .aksel-combobox--readonly .aksel-text-field__input {
-    background-color: var(--ax-bg-neutral-moderate);
-  }
-
-  .aksel-combobox--readonly .aksel-combobox__input {
+  .aksel-combobox--readonly .aksel-text-field__input, .aksel-combobox--readonly .aksel-combobox__input {
     background-color: var(--ax-bg-neutral-moderate);
   }
 
@@ -1710,11 +1534,7 @@
       outline: none;
     }
 
-    .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus) {
-      outline: none;
-    }
-
-    .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus).aksel-combobox__wrapper-inner--virtually-unfocused {
+    .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus), .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus).aksel-combobox__wrapper-inner--virtually-unfocused {
       outline: none;
     }
   }
@@ -1851,7 +1671,7 @@
     border-radius: 0;
     justify-content: flex-start;
     gap: .25rem;
-    margin-top: calc(var(--ax-space-4) * -1);
+    margin-block-start: calc(var(--ax-space-4) * -1);
   }
 
   .aksel-combobox__list-item--new-option svg {
@@ -1879,7 +1699,6 @@
     }
 
     .aksel-combobox__input {
-      min-width: -webkit-min-content;
       min-width: min-content;
       padding: .75rem 0;
     }
@@ -2079,9 +1898,8 @@
     opacity: .001;
     grid-template-rows: 0fr;
     margin-top: -2px;
-    padding-top: 0;
-    padding-bottom: 0;
-    transition-property: margin-top, opacity, visibility, padding-top, grid-template-rows;
+    padding-block: 0;
+    transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
     transition-duration: .3s;
     transition-timing-function: cubic-bezier(.2, 0, 0, 1);
     display: grid;