@navikt/ds-css 7.29.1 → 7.30.1

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

@@ -1 +1 @@
-@layer aksel.components{.aksel-table{border-collapse:collapse;width:100%;display:table}.aksel-table.aksel-table--sticky-header{border-collapse:separate;border-spacing:0}.aksel-table__header{display:table-header-group}.aksel-table--sticky-header .aksel-table__header{z-index:10;background-color:var(--ax-bg-default);box-sizing:border-box;position:sticky;top:0}.aksel-table__body{display:table-row-group}.aksel-table__body .aksel-table__row--shade-on-hover:hover{background-color:var(--ax-bg-neutral-moderate-hoverA);transition:background-color 70ms cubic-bezier(.2,0,0,1)}.aksel-table__body .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__row{display:table-row}.aksel-table__row:has(+.aksel-table__row--selected) :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:var(--ax-border-default)}.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)}.aksel-table__row--selected:first-of-type{box-shadow:inset 1px 0 0 0 var(--ax-border-default),inset -1px 0 0 0 var(--ax-border-default),inset 0 1px 0 0 var(--ax-border-default)}.aksel-table__row--selected+.aksel-table__expanded-row{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)}.aksel-table__row--selected+.aksel-table__expanded-row .aksel-table__expanded-row-collapse{border-color:var(--ax-border-default)}.aksel-table__row--selected :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:var(--ax-border-default)}.aksel-table__row--selected.aksel-table__expandable-row--open :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:#0000}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__expandable-row:nth-child(4n+1):not(.aksel-table__row--selected)){background-color:#0000}.aksel-table--zebra-stripes .aksel-table__body .aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__row--selected+.aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-softA)}.aksel-table__header-cell,.aksel-table__data-cell{padding:var(--ax-space-12) var(--ax-space-8);border-bottom:1px solid var(--ax-border-neutral-subtleA);text-align:left;display:table-cell}.aksel-table__header .aksel-table__header-cell,.aksel-table__header .aksel-table__data-cell{border-bottom-width:2px}.aksel-table__header-cell--align-right,.aksel-table__data-cell--align-right{text-align:right}.aksel-table__header-cell--align-center,.aksel-table__data-cell--align-center{text-align:center}:where(.aksel-table__expandable-row--open:hover) .aksel-table__data-cell{border-bottom-color:#0000}.aksel-table--large .aksel-table__header-cell,.aksel-table--large .aksel-table__data-cell{padding:var(--ax-space-16) var(--ax-space-8)}.aksel-table--small .aksel-table__header-cell,.aksel-table--small .aksel-table__data-cell{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{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__header-cell[aria-sort]{padding:0}.aksel-table__sort-button{appearance:none;color:var(--ax-text-subtle);cursor:pointer;padding:var(--ax-space-16) var(--ax-space-12);gap:var(--ax-space-4);width:100%;line-height:inherit;font-weight:inherit;background:none;border:none;align-items:center;margin:0;display:flex}.aksel-table--small .aksel-table__sort-button{padding:var(--ax-space-8) var(--ax-space-12)}.aksel-table__sort-button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__sort-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-5px}.aksel-table__header-cell[aria-sort=ascending] .aksel-table__sort-button,.aksel-table__header-cell[aria-sort=descending] .aksel-table__sort-button{background-color:var(--ax-bg-moderate-pressedA);color:var(--ax-text-default)}.aksel-table__header-cell--align-right .aksel-table__sort-button{justify-content:flex-end}.aksel-table__header-cell--align-center .aksel-table__sort-button{justify-content:center}.aksel-table__sort-button svg{flex-shrink:0;font-size:1.5rem}.aksel-table__expandable-row:not(.aksel-table__expandable-row--open) :where(.aksel-table__data-cell,.aksel-table__header-cell){transition:border-bottom-color .15s cubic-bezier(.95,.05,.8,.04)}.aksel-table__expandable-row.aksel-table__expandable-row--clickable:not(.aksel-table__expandable-row--expansion-disabled):hover{cursor:pointer}.aksel-table__expandable-row--open :where(.aksel-table__data-cell,.aksel-table__header-cell){border-bottom-color:#0000}.aksel-table__expandable-row--open .aksel-table__toggle-expand-cell--open{border-color:#0000}.aksel-table__toggle-expand-cell{width:3rem;padding:0}.aksel-table--large .aksel-table__toggle-expand-cell{padding:0 var(--ax-space-8)}.aksel-table--small .aksel-table__toggle-expand-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table__toggle-expand-button{cursor:pointer;border-radius:var(--ax-radius-4);background:none;border:none;place-content:center;width:2rem;height:2rem;margin:0 auto;font-size:1.5rem;transition:background-color 70ms cubic-bezier(.2,0,0,1);display:grid}.aksel-table__expandable-icon{transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-table__expandable-row:not(.aksel-table__expandable-row--expansion-disabled) .aksel-table__toggle-expand-cell:hover{cursor:pointer}.aksel-table__toggle-expand-button:hover,.aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,.aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__row--selected :is(:scope .aksel-table__toggle-expand-button:hover,:scope .aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,:scope .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button){background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__toggle-expand-cell--open>:where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon){transform:rotateX(180deg)}.aksel-table__toggle-expand-button:focus-visible{outline:3px solid var(--ax-border-focus)}.aksel-table__expanded-row-cell{padding:0}.aksel-table__expanded-row-cell:empty{display:none}.aksel-table__expanded-row-collapse:not([style*="height: 0px;"]),.aksel-table__expanded-row-collapse[style*="transition:"]{border-bottom:1px solid var(--ax-border-neutral-subtleA)}.aksel-table__expanded-row:has(+.aksel-table__row--selected) .aksel-table__expanded-row-collapse{border-color:var(--ax-border-default)}.aksel-table__expanded-row-content{--__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);padding-block:var(--ax-space-16)}.aksel-table--small .aksel-table__expanded-row-content{padding-block:var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-both{padding-inline:var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-left{padding-inline:var(--__ac-table-expanded-row-pi) var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-right{padding-inline:var(--ax-space-8) var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-none{padding-inline:var(--ax-space-8)}}
+@layer aksel.components{.aksel-table{border-collapse:collapse;width:100%;display:table}.aksel-table.aksel-table--sticky-header{border-collapse:separate;border-spacing:0}.aksel-table__header{display:table-header-group}.aksel-table--sticky-header .aksel-table__header{z-index:10;background-color:var(--ax-bg-default);box-sizing:border-box;position:sticky;top:0}.aksel-table__body{display:table-row-group}.aksel-table__body .aksel-table__row--shade-on-hover:hover{background-color:var(--ax-bg-neutral-moderate-hoverA);transition:background-color 70ms cubic-bezier(.2,0,0,1)}.aksel-table__body .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__row{display:table-row}.aksel-table__row:has(+.aksel-table__row--selected) :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:var(--ax-border-default)}.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)}.aksel-table__row--selected:first-of-type{box-shadow:inset 1px 0 0 0 var(--ax-border-default),inset -1px 0 0 0 var(--ax-border-default),inset 0 1px 0 0 var(--ax-border-default)}.aksel-table__row--selected+.aksel-table__expanded-row{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)}.aksel-table__row--selected+.aksel-table__expanded-row .aksel-table__expanded-row-collapse{border-color:var(--ax-border-default)}.aksel-table__row--selected :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:var(--ax-border-default)}.aksel-table__row--selected.aksel-table__expandable-row--open :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:#0000}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__expandable-row:nth-child(4n+1):not(.aksel-table__row--selected)){background-color:#0000}.aksel-table--zebra-stripes .aksel-table__body .aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__row--selected+.aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-softA)}.aksel-table__header-cell,.aksel-table__data-cell{padding:var(--ax-space-12) var(--ax-space-8);border-bottom:1px solid var(--ax-border-neutral-subtleA);text-align:left;display:table-cell}.aksel-table__header .aksel-table__header-cell,.aksel-table__header .aksel-table__data-cell{border-bottom-width:2px}.aksel-table__header-cell--align-right,.aksel-table__data-cell--align-right{text-align:right}.aksel-table__header-cell--align-center,.aksel-table__data-cell--align-center{text-align:center}:where(.aksel-table__expandable-row--open:hover) .aksel-table__data-cell{border-bottom-color:#0000}.aksel-table--large .aksel-table__header-cell,.aksel-table--large .aksel-table__data-cell{padding:var(--ax-space-16) var(--ax-space-8)}.aksel-table--small .aksel-table__header-cell,.aksel-table--small .aksel-table__data-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox{padding:0}.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox:focus-within:after{inset:0}.aksel-table__header-cell[aria-sort]{padding:0}.aksel-table__sort-button{appearance:none;color:var(--ax-text-subtle);cursor:pointer;padding:var(--ax-space-16) var(--ax-space-12);gap:var(--ax-space-4);width:100%;line-height:inherit;font-weight:inherit;background:none;border:none;align-items:center;margin:0;display:flex}.aksel-table--small .aksel-table__sort-button{padding:var(--ax-space-8) var(--ax-space-12)}.aksel-table__sort-button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__sort-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-5px}.aksel-table__header-cell[aria-sort=ascending] .aksel-table__sort-button,.aksel-table__header-cell[aria-sort=descending] .aksel-table__sort-button{background-color:var(--ax-bg-moderate-pressedA);color:var(--ax-text-default)}.aksel-table__header-cell--align-right .aksel-table__sort-button{justify-content:flex-end}.aksel-table__header-cell--align-center .aksel-table__sort-button{justify-content:center}.aksel-table__sort-button svg{flex-shrink:0;font-size:1.5rem}.aksel-table__expandable-row:not(.aksel-table__expandable-row--open) :where(.aksel-table__data-cell,.aksel-table__header-cell){transition:border-bottom-color .15s cubic-bezier(.95,.05,.8,.04)}.aksel-table__expandable-row.aksel-table__expandable-row--clickable:not(.aksel-table__expandable-row--expansion-disabled):hover{cursor:pointer}.aksel-table__expandable-row--open :where(.aksel-table__data-cell,.aksel-table__header-cell){border-bottom-color:#0000}.aksel-table__expandable-row--open .aksel-table__toggle-expand-cell--open{border-color:#0000}.aksel-table__toggle-expand-cell{width:3rem;padding:0}.aksel-table--large .aksel-table__toggle-expand-cell{padding:0 var(--ax-space-8)}.aksel-table--small .aksel-table__toggle-expand-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table__toggle-expand-button{cursor:pointer;border-radius:var(--ax-radius-4);background:none;border:none;place-content:center;width:2rem;height:2rem;margin:0 auto;font-size:1.5rem;transition:background-color 70ms cubic-bezier(.2,0,0,1);display:grid}.aksel-table__expandable-icon{transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-table__expandable-row:not(.aksel-table__expandable-row--expansion-disabled) .aksel-table__toggle-expand-cell:hover{cursor:pointer}.aksel-table__toggle-expand-button:hover,.aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,.aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__row--selected :is(:scope .aksel-table__toggle-expand-button:hover,:scope .aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,:scope .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button){background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__toggle-expand-cell--open>:where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon){transform:rotateX(180deg)}.aksel-table__toggle-expand-button:focus-visible{outline:3px solid var(--ax-border-focus)}.aksel-table__expanded-row-cell{padding:0}.aksel-table__expanded-row-cell:empty{display:none}.aksel-table__expanded-row-collapse:not([style*="height: 0px;"]),.aksel-table__expanded-row-collapse[style*="transition:"]{border-bottom:1px solid var(--ax-border-neutral-subtleA)}.aksel-table__expanded-row:has(+.aksel-table__row--selected) .aksel-table__expanded-row-collapse{border-color:var(--ax-border-default)}.aksel-table__expanded-row-content{--__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);padding-block:var(--ax-space-16)}.aksel-table--small .aksel-table__expanded-row-content{padding-block:var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-both{padding-inline:var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-left{padding-inline:var(--__ac-table-expanded-row-pi) var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-right{padding-inline:var(--ax-space-8) var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-none{padding-inline:var(--ax-space-8)}}

package/dist/darkside/components.css

@@ -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;
+    :is(.aksel-checkbox, .aksel-checkbox--readonly) .aksel-checkbox__input:indeterminate:after {
+      background-color: fieldtext;
     }
 
-    .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);
-    }
-
-    .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;
     }
   }
@@ -2388,8 +2348,7 @@
     }
   }
 
-  .aksel-form-summary__edit {
-    margin-top: var(--ax-space-4);
+  .aksel-form-summary__header .aksel-form-summary__edit {
     flex-shrink: 0;
     align-self: flex-start;
   }
@@ -2450,6 +2409,19 @@
     border-color: var(--ax-border-subtleA);
   }
 
+  .aksel-form-summary__footer {
+    padding: var(--ax-space-16) var(--ax-space-20);
+    background: var(--ax-bg-raised);
+    border-top: 1px solid var(--ax-border-neutral-subtleA);
+    display: flex;
+  }
+
+  @media (max-width: 479px) {
+    .aksel-form-summary__footer {
+      padding: var(--ax-space-12) var(--ax-space-16);
+    }
+  }
+
   .aksel-form-progress__bar {
     margin-bottom: var(--ax-space-8);
   }
@@ -5765,28 +5737,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] {