@navikt/ds-css 7.30.0 → 7.31.0

package/dist/darkside/version/{7.30.0 → 7.31.0}/components.css

@@ -258,6 +258,7 @@
 
   .aksel-typo--visually-hidden {
     clip: rect(0, 0, 0, 0) !important;
+    clip-path: inset(50%) !important;
     white-space: nowrap !important;
     border: 0 !important;
     width: 1px !important;
@@ -265,7 +266,6 @@
     margin: -1px !important;
     padding: 0 !important;
     position: absolute !important;
-    top: 0 !important;
     overflow: hidden !important;
   }
 
@@ -1016,256 +1016,216 @@
   }
 
   .aksel-checkbox, .aksel-radio {
+    --__axc-radio-checkbox-marker-size: 1.5rem;
+    --__axc-radio-checkbox-marker-target: 2.75rem;
+    gap: var(--ax-space-2) 0;
     width: fit-content;
+    padding: var(--ax-space-12) 0;
+    grid-template-columns: auto 1fr;
+    display: grid;
     position: relative;
   }
 
-  .aksel-checkbox__input, .aksel-radio__input {
-    z-index: 1;
-    opacity: 0;
-    cursor: pointer;
-    width: 3rem;
-    height: 3rem;
+  :is(.aksel-checkbox, .aksel-radio):focus-within:after {
+    content: "";
+    inset: var(--ax-space-12) 0;
+    pointer-events: none;
+    border-radius: var(--ax-radius-4);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     position: absolute;
-    top: 0;
-    left: -.75rem;
   }
 
-  .aksel-checkbox__label, .aksel-radio__label {
-    padding: var(--ax-space-12) 0;
-    cursor: pointer;
-    gap: var(--ax-space-8);
-    --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
-    --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
-    display: flex;
+  .aksel-checkbox--small, .aksel-radio--small {
+    --__axc-radio-checkbox-marker-size: 1.25rem;
+    --__axc-radio-checkbox-marker-target: 2rem;
+    padding: var(--ax-space-6) 0;
   }
 
-  .aksel-checkbox__label:before, .aksel-radio__label:before {
-    content: "";
-    border-radius: var(--ax-radius-4);
-    background-color: var(--ax-bg-input);
-    border: 2px solid var(--ax-border-neutral);
-    flex-shrink: 0;
-    width: 1.5rem;
-    height: 1.5rem;
+  :is(.aksel-checkbox--small, .aksel-radio--small):focus-within:after {
+    inset: var(--ax-space-6) 0;
   }
 
-  .aksel-radio__label:before {
-    border-radius: var(--ax-radius-full);
+  .aksel-checkbox__label, .aksel-radio__label {
+    cursor: pointer;
   }
 
-  .aksel-checkbox__content, .aksel-radio__content {
-    flex-direction: column;
-    gap: .125rem;
-    display: flex;
+  .aksel-checkbox__description, .aksel-radio__description {
+    grid-column-start: 2;
   }
 
-  .aksel-checkbox--small > .aksel-checkbox__input, .aksel-radio--small > .aksel-radio__input {
-    width: 2rem;
-    height: 2rem;
-    top: 0;
-    left: -.375rem;
+  .aksel-checkbox__label, .aksel-radio__label, .aksel-checkbox__description, .aksel-radio__description {
+    padding-left: var(--ax-space-8);
   }
 
-  .aksel-checkbox--small > .aksel-checkbox__label, .aksel-radio--small > .aksel-radio__label {
-    padding: var(--ax-space-6) 0;
+  .aksel-checkbox__input-wrapper {
+    height: var(--__axc-radio-checkbox-marker-size);
+    position: relative;
   }
 
-  .aksel-checkbox--small > .aksel-checkbox__label:before, .aksel-radio--small > .aksel-radio__label:before {
-    width: 1.25rem;
-    height: 1.25rem;
+  .aksel-checkbox__input, .aksel-radio__input {
+    --__axc-radio-checkbox-marker-border: 2px;
+    appearance: none;
+    cursor: pointer;
+    width: var(--__axc-radio-checkbox-marker-size);
+    height: var(--__axc-radio-checkbox-marker-size);
+    background-color: var(--ax-bg-input);
+    border: var(--__axc-radio-checkbox-marker-border) solid var(--ax-border-neutral);
+    border-radius: var(--ax-radius-4);
+    outline: none;
+    position: relative;
   }
 
-  .aksel-checkbox__input:focus + .aksel-checkbox__label:after, .aksel-radio__input:focus + .aksel-radio__label:after {
+  .aksel-checkbox__input:before, .aksel-radio__input:before {
     content: "";
-    width: 100%;
-    height: calc(100% - var(--ax-space-24));
-    border-radius: var(--ax-radius-4);
-    outline: 3px solid var(--ax-border-focus);
-    outline-offset: 3px;
-    pointer-events: none;
+    inset: calc(-1 * (var(--__axc-radio-checkbox-marker-border)  + (var(--__axc-radio-checkbox-marker-target)  - var(--__axc-radio-checkbox-marker-size)) / 2));
     position: absolute;
   }
 
-  .aksel-checkbox--small > .aksel-checkbox__input:focus + .aksel-checkbox__label:after, .aksel-radio--small > .aksel-radio__input:focus + .aksel-radio__label:after {
-    height: calc(100% - var(--ax-space-12));
+  .aksel-radio__input {
+    border-radius: var(--ax-radius-full);
   }
 
-  .aksel-checkbox__icon-indeterminate {
-    display: none;
+  .aksel-checkbox__input:indeterminate {
+    justify-content: center;
+    align-items: center;
+    display: flex;
   }
 
-  .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
+  .aksel-checkbox__input:indeterminate:after {
+    content: "";
     background-color: var(--ax-bg-default);
+    border-radius: 1px;
     width: .75rem;
     height: .25rem;
-    transform: translate(var(--ax-space-6), -50%);
-    top: var(--ax-space-24);
-    pointer-events: none;
-    border-radius: 1px;
-    display: block;
     position: absolute;
   }
 
-  .aksel-checkbox--small .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-    transform: translate(var(--ax-space-4), -50%);
-    top: var(--ax-space-16);
-    height: .1875rem;
-  }
-
-  .aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label:before {
+  .aksel-checkbox__input:where(:checked, :indeterminate) {
     background-color: var(--ax-bg-strong-pressed);
     border-color: var(--ax-bg-strong-pressed);
   }
 
-  .aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .aksel-checkbox__label:before {
+  .aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover {
     border-color: var(--ax-bg-strong-hover);
     background-color: var(--ax-bg-strong-hover);
   }
 
-  .aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__label > .aksel-checkbox__icon {
+  .aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__icon {
     display: none;
   }
 
-  .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
+  .aksel-checkbox__icon {
     color: var(--ax-bg-default);
-    height: 1.5rem;
-    transform: translate(var(--ax-space-6));
     pointer-events: none;
-    align-items: center;
-    display: flex;
-    position: absolute;
-  }
-
-  .aksel-checkbox--small .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
-    transform: translate(.25rem, -10%);
-  }
-
-  .aksel-checkbox__icon > svg {
     width: .8125rem;
-    height: .625rem;
-    display: block;
+    height: var(--__axc-radio-checkbox-marker-size);
+    top: 0;
+    left: var(--ax-space-6);
+    position: absolute;
   }
 
-  .aksel-checkbox--small > .aksel-checkbox__input:checked + .aksel-checkbox__label:before {
-    background-position: .25rem;
+  .aksel-checkbox--small .aksel-checkbox__input:checked + .aksel-checkbox__icon {
+    left: var(--ax-space-4);
   }
 
-  .aksel-radio__input:checked + .aksel-radio__label:before {
+  .aksel-radio__input:checked {
+    --__axc-radio-checkbox-marker-border: 8px;
+    border-color: var(--ax-bg-strong-pressed);
     background-color: var(--ax-bg-input);
-    border: 8px solid var(--ax-bg-strong-pressed);
   }
 
-  .aksel-radio--small > .aksel-radio__input:checked + .aksel-radio__label:before {
-    border-width: 6px;
+  .aksel-radio--small > .aksel-radio__input:checked {
+    --__axc-radio-checkbox-marker-border: 7px;
   }
 
-  .aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label:before, .aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label:before {
+  .aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate), .aksel-radio__input:hover:not(:disabled, :checked) {
     border-color: var(--ax-border-strong);
     background-color: var(--ax-bg-moderate-hoverA);
   }
 
-  .aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label:before, .aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label:before {
+  .aksel-checkbox--error .aksel-checkbox__input:not(:disabled, :checked, :indeterminate), .aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) {
     border-color: var(--ax-border-danger-strong);
   }
 
-  .aksel-radio--error > .aksel-radio__input:checked + .aksel-radio__label:before {
-    border-color: var(--ax-bg-danger-strong-pressed);
-  }
-
   .aksel-checkbox--disabled, .aksel-radio--disabled {
     opacity: var(--ax-opacity-disabled);
   }
 
-  .aksel-checkbox--disabled > .aksel-checkbox__input, .aksel-checkbox--disabled > .aksel-checkbox__label, .aksel-radio--disabled > .aksel-radio__input, .aksel-radio--disabled > .aksel-radio__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-checkbox--readonly > :where(.aksel-checkbox__input, .aksel-checkbox__label), .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;
   }
 
-  .aksel-checkbox--readonly .aksel-checkbox__label-text {
-    display: inline-flex;
+  .aksel-checkbox--readonly .aksel-checkbox__input:not(:disabled), .aksel-radio--readonly > .aksel-radio__input:not(:disabled) {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtle);
   }
 
-  .aksel-checkbox--readonly > .aksel-checkbox__input:not(:disabled) + .aksel-checkbox__label:before, .aksel-checkbox--readonly > .aksel-checkbox__input:hover .aksel-checkbox__label:before, .aksel-radio--readonly > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label:before, .aksel-radio--readonly > .aksel-radio__input:hover:not(:checked, :focus) + .aksel-radio__label:before {
-    background-color: var(--__axc-radio-checkbox-readonly-bg);
-    border-color: var(--__axc-radio-checkbox-readonly-border);
+  .aksel-checkbox--readonly .aksel-checkbox__label {
+    display: inline-flex;
   }
 
-  .aksel-checkbox--readonly > .aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label:before {
-    border-color: var(--__axc-radio-checkbox-readonly-border);
-    background-color: var(--__axc-radio-checkbox-readonly-bg);
+  .aksel-checkbox--readonly .aksel-checkbox__input:checked + .aksel-checkbox__icon {
+    color: var(--ax-text-neutral-subtle);
   }
 
-  .aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
-    color: var(--ax-text-neutral-subtle);
+  .aksel-checkbox--readonly .aksel-checkbox__input:indeterminate:after {
+    background-color: var(--ax-text-neutral-subtle);
   }
 
-  .aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label:before {
+  .aksel-radio--readonly > .aksel-radio__input:checked {
+    --__axc-radio-checkbox-marker-border: 0px;
     background-color: var(--ax-bg-neutral-strong);
     box-shadow: inset 0 0 0 2px var(--ax-border-neutral-subtle), inset 0 0 0 8px var(--ax-bg-neutral-moderate);
-    border-width: 0;
   }
 
-  .aksel-radio--small.aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label:before {
+  .aksel-radio--small.aksel-radio--readonly > .aksel-radio__input:checked {
     box-shadow: inset 0 0 0 2px var(--ax-border-neutral-subtle), inset 0 0 0 7px var(--ax-bg-neutral-moderate);
   }
 
-  .aksel-checkbox--readonly > .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-    background-color: var(--ax-text-neutral-subtle);
-  }
-
   @media (forced-colors: active) {
-    .aksel-checkbox, .aksel-radio {
-      --__axc-radio-checkbox-high-contrast-bg: field;
-      --__axc-radio-checkbox-high-contrast-text: fieldtext;
-      --__axc-radio-checkbox-high-contrast-highlight: highlight;
-      --ax-border-focus: Highlight;
-    }
-
-    .aksel-checkbox__label:before, .aksel-radio__label:before {
-      border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
-      background-color: var(--__axc-radio-checkbox-high-contrast-bg);
+    :is(.aksel-checkbox, .aksel-checkbox--readonly) .aksel-checkbox__input:indeterminate:after {
+      background-color: fieldtext;
     }
 
-    .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
-      color: var(--__axc-radio-checkbox-high-contrast-text);
+    .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;
     }
 
-    .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-      background-color: var(--__axc-radio-checkbox-high-contrast-text);
+    .aksel-checkbox:not(.aksel-checkbox--readonly) .aksel-checkbox__input:hover:not(:disabled), .aksel-radio:not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) {
+      border-color: highlight;
     }
 
-    .aksel-radio__input:checked + .aksel-radio__label:before {
-      border: 6px solid var(--__axc-radio-checkbox-high-contrast-text);
+    .aksel-checkbox--readonly .aksel-checkbox__input:checked + .aksel-checkbox__icon {
+      color: var(--ax-bg-default);
     }
 
-    :not(.aksel-checkbox--readonly) > .aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label, :not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) + .aksel-radio__label {
-      color: highlight;
+    .aksel-radio--readonly > .aksel-radio__input:checked {
+      --__axc-radio-checkbox-marker-border: 8px;
     }
 
-    .aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-checkbox__label:before {
-      border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
-      background-color: var(--__axc-radio-checkbox-high-contrast-bg);
+    .aksel-radio--small.aksel-radio--readonly > .aksel-radio__input:checked {
+      --__axc-radio-checkbox-marker-border: 7px;
     }
 
-    .aksel-checkbox--readonly > .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-      background-color: var(--__axc-radio-checkbox-high-contrast-text);
+    .aksel-checkbox--disabled, .aksel-radio--disabled {
+      opacity: 1;
     }
 
-    .aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label:before {
-      border-width: 6px;
+    .aksel-checkbox--disabled .aksel-checkbox__input, .aksel-radio--disabled .aksel-radio__input {
+      background-color: field;
+      border-color: graytext;
     }
 
-    .aksel-checkbox--disabled, .aksel-radio--disabled {
-      opacity: 1;
-      --__axc-radio-checkbox-high-contrast-bg: field;
-      --__axc-radio-checkbox-high-contrast-text: graytext;
+    .aksel-checkbox--disabled .aksel-checkbox__input:indeterminate:after {
+      background-color: graytext;
     }
 
-    :is(.aksel-checkbox--disabled, .aksel-radio--disabled) :is(.aksel-checkbox__label, .aksel-radio__label) {
+    .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;
     }
   }
@@ -2151,20 +2111,14 @@
   }
 
   .aksel-combobox__list {
-    z-index: 10;
-    max-height: 316px;
-    left: 0;
-    right: 0;
-    top: calc(100% + var(--ax-space-8));
+    width: var(--ac-floating-anchor-width);
     border: 1px solid var(--ax-border-neutral-subtleA);
     border-radius: var(--ax-radius-8);
     background-color: var(--ax-bg-raised);
     color: var(--ax-text-neutral);
-    overscroll-behavior: contain;
     box-shadow: var(--ax-shadow-dialog);
     flex-direction: column;
     display: flex;
-    position: absolute;
     overflow: clip;
   }
 
@@ -2299,6 +2253,10 @@
     .aksel-combobox__selected-options {
       gap: var(--ax-space-4);
     }
+
+    .aksel-combobox__list {
+      overscroll-behavior: contain;
+    }
   }
 
   @media (forced-colors: active) {
@@ -3645,7 +3603,7 @@
   .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) .aksel-guide-panel__tail {
     left: 50%;
     top: calc(var(--ax-space-16) * -1 - 2px);
-    transform: translateX(-48%);
+    transform: translateX(-25%);
   }
 
   .aksel-guide-panel[data-poster="false"] .aksel-guide-panel__tail {
@@ -5704,6 +5662,10 @@
     border-color: var(--ax-border-default);
   }
 
+  .aksel-table__row[data-interactive="true"]:hover {
+    cursor: pointer;
+  }
+
   .aksel-table__row--selected {
     background-color: var(--ax-bg-softA);
     box-shadow: inset 1px 0 0 0 var(--ax-border-default), inset -1px 0 0 0 var(--ax-border-default);
@@ -5777,28 +5739,12 @@
     padding: var(--ax-space-4) var(--ax-space-8);
   }
 
-  .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input {
-    top: -.75rem;
-  }
-
-  .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox--small .aksel-checkbox__input {
-    top: -.375rem;
-  }
-
-  .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__label {
+  .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox {
     padding: 0;
   }
 
-  .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-    top: var(--ax-space-12);
-  }
-
-  .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox--small .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-    top: .6rem;
-  }
-
-  .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input:focus + .aksel-checkbox__label:after {
-    height: 100%;
+  .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox:focus-within:after {
+    inset: 0;
   }
 
   .aksel-table__header-cell[aria-sort] {