@navikt/ds-css 7.23.2 → 7.25.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @navikt/ds-css
 
+## 7.25.1
+
+## 7.25.0
+
+### Minor Changes
+
+- FileUpload: Allow for custom buttons in FileUpload.Item. ([#3906](https://github.com/navikt/aksel/pull/3906))
+
+### Patch Changes
+
+- Table: Selected rows are now highlighted with outline. ([#3898](https://github.com/navikt/aksel/pull/3898))
+
+- Chat: Removed ol > li semantics, replaced with 'div'. ([#3904](https://github.com/navikt/aksel/pull/3904))
+
+## 7.24.0
+
+### Minor Changes
+
+- LinkCard: :tada: Added new component 'LinkCard'. ([#3883](https://github.com/navikt/aksel/pull/3883))
+
+- Table: :tada: Added prop 'stickyHeader', allowing header to remain sticky while scrolling in table. ([#3893](https://github.com/navikt/aksel/pull/3893))
+
+### Patch Changes
+
+- Forms: Added built-in scroll-margin to TextField, Textarea and Select. ([#3897](https://github.com/navikt/aksel/pull/3897))
+
+- Switch: Size='small' are now visually comparable to radio and checkbox in the same size. ([#3892](https://github.com/navikt/aksel/pull/3892))
+
 ## 7.23.2
 
 ### Patch Changes

package/chat.css

@@ -10,9 +10,6 @@
 }
 
 .navds-chat__bubble-wrapper {
-  list-style: none;
-  margin: 0;
-  padding: 0;
   display: flex;
   flex-direction: column;
   gap: var(--a-spacing-3);

package/config/_mappings.js

@@ -124,7 +124,13 @@ const StyleMappings = {
     {
       component: "FileUpload",
       main: formCss,
-      dependencies: [typoCss, "button.css", "loader.css", "link.css"],
+      dependencies: [
+        typoCss,
+        "button.css",
+        "loader.css",
+        "link.css",
+        primitivesCss,
+      ],
     },
     {
       component: "GuidePanel",
@@ -145,6 +151,11 @@ const StyleMappings = {
     },
     { component: "Label", main: typoCss },
     { component: "Link", main: "link.css", dependencies: [typoCss] },
+    {
+      component: "LinkCard",
+      main: "link-card.css",
+      dependencies: [typoCss, "link-anchor.css"],
+    },
     {
       component: "LinkPanel",
       main: "link-panel.css",

package/darkside/chat.darkside.css

@@ -61,9 +61,6 @@
 
 /* ------------------------------- Chat bubble ------------------------------ */
 .aksel-chat__bubble-wrapper {
-  list-style: none;
-  margin: 0;
-  padding: 0;
   display: flex;
   flex-direction: column;
   gap: var(--ax-space-12);

package/darkside/form/file-upload.darkside.css

@@ -197,10 +197,6 @@ li.aksel-file-item {
   overflow-wrap: anywhere;
 }
 
-.aksel-file-item__button {
-  margin-left: auto;
-}
-
 .aksel-file-item__error {
   display: grid;
   transition-property: grid-template-rows, padding-top;

package/darkside/form/select.darkside.css

@@ -11,6 +11,7 @@
   position: relative;
   padding: var(--ax-space-8);
   padding-right: var(--ax-space-40);
+  scroll-margin-block-start: 4rem;
 
   &:hover {
     border-color: var(--ax-border-strong);

package/darkside/form/switch.darkside.css

@@ -20,6 +20,7 @@
 
   .aksel-switch--small > & {
     height: 2rem;
+    width: 2.5rem;
     top: 0;
   }
 }
@@ -32,19 +33,21 @@
 
 .aksel-switch__content {
   --__axc-switch-block-padding: 0.75rem;
+  --__axc-switch-inline-padding: 3.25rem;
 
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--ax-space-2);
-  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
+  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding);
 
   .aksel-switch--right & {
-    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
+    padding: var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding) var(--__axc-switch-block-padding) 0;
   }
 
   .aksel-switch--small & {
     --__axc-switch-block-padding: 0.375rem;
+    --__axc-switch-inline-padding: 2.75rem;
   }
 
   &.aksel-switch--with-description {
@@ -87,7 +90,9 @@
   transition-timing-function: ease;
 
   .aksel-switch--small > & {
-    top: var(--ax-space-4);
+    top: var(--ax-space-6);
+    width: 2.25rem;
+    height: 1.25rem;
   }
 
   .aksel-switch__input:checked ~ & {
@@ -135,6 +140,11 @@
   left: 0.0625rem;
   top: 0.0625rem;
 
+  .aksel-switch--small & {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
   .aksel-switch__input:checked ~ .aksel-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
@@ -145,18 +155,15 @@
     top: 0;
   }
 
-  .aksel-switch__input:checked ~ .aksel-switch__track > & > .aksel-switch__checkmark {
-    visibility: visible;
-    opacity: 1;
+  .aksel-switch--small > .aksel-switch__input:checked ~ .aksel-switch__track > & {
+    transform: translateX(1rem);
+    width: 1rem;
+    height: 1rem;
+    left: 0;
+    top: 0;
   }
 }
 
-.aksel-switch__checkmark {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 @media (hover: hover) and (pointer: fine) {
   .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(0.17rem);
@@ -165,6 +172,10 @@
   .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(1.1rem);
   }
+
+  .aksel-switch--small > .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
+    transform: translateX(0.875rem);
+  }
 }
 
 .aksel-switch--right {
@@ -227,6 +238,10 @@
     & > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(1.25rem);
     }
+
+    &.aksel-switch--small > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(1rem);
+    }
   }
 }
 

package/darkside/form/text-field.darkside.css

@@ -7,6 +7,7 @@
   min-height: 3rem;
   width: 100%;
   color: var(--ax-text-neutral);
+  scroll-margin-block-start: 4rem;
 
   &:hover {
     border-color: var(--ax-border-strong);

package/darkside/form/textarea.darkside.css

@@ -10,6 +10,7 @@
   width: 100%;
   display: block;
   color: var(--ax-text-neutral);
+  scroll-margin-block-start: 4rem;
 
   &::placeholder {
     color: var(--ax-text-neutral-subtle);

package/darkside/index.css

@@ -38,6 +38,8 @@
 @import "./internalheader.darkside.css" layer(aksel.components);
 @import "./link.darkside.css" layer(aksel.components);
 @import "./link-panel.darkside.css" layer(aksel.components);
+@import "./link-anchor.darkside.css" layer(aksel.components);
+@import "./link-card.darkside.css" layer(aksel.components);
 @import "./loader.darkside.css" layer(aksel.components);
 @import "./modal.darkside.css" layer(aksel.components);
 @import "./pagination.darkside.css" layer(aksel.components);

package/darkside/link-anchor.darkside.css

@@ -0,0 +1,53 @@
+.aksel-link-anchor__overlay {
+  cursor: pointer;
+
+  &:focus-within {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+@supports selector(:has(*)) {
+  .aksel-link-anchor__overlay:focus-within {
+    outline: unset;
+  }
+
+  .aksel-link-anchor__overlay:has(:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+.aksel-link-anchor {
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 0.1em;
+  text-decoration-thickness: 0.05em;
+  color: inherit;
+
+  &:hover,
+  .aksel-link-anchor__overlay:hover & {
+    text-decoration-thickness: 0.111em;
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-radius: 1px;
+  }
+
+  .aksel-link-anchor__overlay &:focus-visible {
+    outline: none;
+  }
+}
+
+.aksel-link-anchor__arrow {
+  transition: transform 200ms;
+  transform: translateX(0);
+  flex-shrink: 0;
+
+  .aksel-link-anchor:hover &,
+  .aksel-link-anchor__overlay:hover & {
+    transform: translateX(4px);
+  }
+}

package/darkside/link-card.darkside.css

@@ -0,0 +1,109 @@
+.aksel-link-card {
+  --__axc-link-card-padding-block: var(--ax-space-16);
+  --__axc-link-card-padding-inline: var(--ax-space-20);
+
+  border-radius: var(--ax-border-radius-xlarge);
+  text-decoration: none;
+  color: var(--ax-text-neutral);
+  transition-property: border-color, box-shadow, transform, background-color;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0, 1);
+  position: relative;
+  background-color: var(--ax-bg-raised);
+  border: 1px solid var(--ax-border-subtleA);
+  padding: var(--__axc-link-card-padding-block) var(--__axc-link-card-padding-inline);
+  cursor: pointer;
+  display: grid;
+  grid-template-areas:
+    "image image"
+    "icon title"
+    "icon description"
+    "icon footer";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: min-content min-content min-content auto;
+  align-items: center;
+
+  &:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) {
+    grid-template-rows: auto 1fr;
+
+    & .aksel-link-card__title {
+      align-items: center;
+    }
+
+    & .aksel-link-card__icon {
+      align-self: center;
+    }
+  }
+
+  &:hover {
+    border-color: var(--ax-border-default);
+    box-shadow: 0 0 0 1px var(--ax-border-default);
+  }
+}
+
+.aksel-link-card--small {
+  --__axc-link-card-padding-block: var(--ax-space-12);
+  --__axc-link-card-padding-inline: var(--ax-space-16);
+}
+
+.aksel-link-card__title {
+  grid-area: title;
+  color: var(--ax-text-subtle);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--ax-space-8);
+  hyphens: auto;
+
+  .aksel-link-card[data-color="neutral"] &,
+  &[data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
+}
+
+.aksel-link-card__description {
+  grid-area: description;
+  margin-block-start: var(--ax-space-4);
+}
+
+.aksel-link-card__footer {
+  grid-area: footer;
+  margin-block-start: var(--ax-space-16);
+  display: flex;
+  align-self: flex-end;
+  gap: var(--ax-space-8);
+  flex-wrap: wrap;
+}
+
+.aksel-link-card__icon {
+  grid-area: icon;
+  width: max-content;
+  height: max-content;
+  display: grid;
+  place-content: center;
+  color: var(--ax-text-default);
+  align-self: flex-start;
+  margin-inline-end: var(--ax-space-16);
+
+  .aksel-link-card--small & {
+    margin-inline-end: var(--ax-space-12);
+  }
+}
+
+.aksel-link-card__image-container {
+  overflow: hidden;
+  grid-area: image;
+  margin-block: calc(var(--__axc-link-card-padding-block) * -1) var(--__axc-link-card-padding-block);
+  margin-inline: calc(var(--__axc-link-card-padding-inline) * 1 * -1);
+  border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  position: relative;
+
+  & :is(img, picture) {
+    object-fit: cover;
+    display: block;
+    max-width: 100%;
+    height: 100%;
+  }
+}

package/darkside/table.darkside.css

@@ -2,10 +2,23 @@
   width: 100%;
   border-collapse: collapse;
   display: table;
+
+  &.aksel-table--sticky-header {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
 }
 
 .aksel-table__header {
   display: table-header-group;
+
+  .aksel-table--sticky-header & {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: var(--ax-bg-default);
+    box-sizing: border-box;
+  }
 }
 
 .aksel-table__body {
@@ -23,13 +36,42 @@
 
 .aksel-table__row {
   display: 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);
+
+  &: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__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__expanded-row-collapse {
+      border-color: var(--ax-border-default);
+    }
+  }
+
+  & :is(.aksel-table__header-cell, .aksel-table__data-cell) {
+    border-color: var(--ax-border-default);
+  }
+
+  &.aksel-table__expandable-row--open :is(.aksel-table__header-cell, .aksel-table__data-cell) {
+    border-color: transparent;
   }
 }
 
@@ -245,6 +287,14 @@
   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);
 

package/dist/component/chat.css

@@ -10,9 +10,6 @@
 }
 
 .navds-chat__bubble-wrapper {
-  list-style: none;
-  margin: 0;
-  padding: 0;
   display: flex;
   flex-direction: column;
   gap: var(--a-spacing-3);

package/dist/component/chat.min.css

@@ -1 +1 @@
-.navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-3);max-width:40.75rem}.navds-chat--right{flex-direction:row-reverse}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3);list-style:none;margin:0;padding:0}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background-color:var(--ac-chat-avatar-bg,var(--a-surface-neutral-subtle));border-radius:var(--a-border-radius-full);box-shadow:var(--a-shadow-xsmall);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;font-size:1.06rem;height:2.5rem;justify-content:center;letter-spacing:.024rem;line-height:2.5rem;overflow:hidden;width:2.5rem}.navds-chat__avatar svg{align-self:center;max-height:1.5rem;max-width:1.5rem;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-surface-neutral-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-xsmall);display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4);width:-webkit-fit-content;width:fit-content}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat--small .navds-chat__bubble{padding:var(--a-spacing-3)}.navds-chat--info .navds-chat__avatar,.navds-chat--info .navds-chat__bubble{background-color:var(--a-surface-info-subtle)}.navds-chat--subtle .navds-chat__avatar,.navds-chat--subtle .navds-chat__bubble{background-color:var(--a-surface-default)}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;font-weight:400;gap:var(--a-spacing-2);margin:0}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}@media (forced-colors:active){.navds-chat__avatar,.navds-chat__bubble{background-color:canvas;border:1px solid canvastext;color:initial}.navds-chat__avatar svg{forced-color-adjust:none}}
+.navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-3);max-width:40.75rem}.navds-chat--right{flex-direction:row-reverse}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3)}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background-color:var(--ac-chat-avatar-bg,var(--a-surface-neutral-subtle));border-radius:var(--a-border-radius-full);box-shadow:var(--a-shadow-xsmall);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;font-size:1.06rem;height:2.5rem;justify-content:center;letter-spacing:.024rem;line-height:2.5rem;overflow:hidden;width:2.5rem}.navds-chat__avatar svg{align-self:center;max-height:1.5rem;max-width:1.5rem;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-surface-neutral-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-xsmall);display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4);width:-webkit-fit-content;width:fit-content}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat--small .navds-chat__bubble{padding:var(--a-spacing-3)}.navds-chat--info .navds-chat__avatar,.navds-chat--info .navds-chat__bubble{background-color:var(--a-surface-info-subtle)}.navds-chat--subtle .navds-chat__avatar,.navds-chat--subtle .navds-chat__bubble{background-color:var(--a-surface-default)}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;font-weight:400;gap:var(--a-spacing-2);margin:0}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}@media (forced-colors:active){.navds-chat__avatar,.navds-chat__bubble{background-color:canvas;border:1px solid canvastext;color:initial}.navds-chat__avatar svg{forced-color-adjust:none}}

package/dist/component/form.css

@@ -256,9 +256,6 @@ li.navds-file-item {
 .navds-file-item__file-info {
   overflow-wrap: anywhere;
 }
-.navds-file-item__button {
-  margin-left: auto;
-}
 .navds-file-item__error {
   color: var(--a-text-danger);
   display: grid;
@@ -743,6 +740,7 @@ li.navds-file-item {
   position: relative;
   padding: 0.5rem;
   padding-right: 2rem;
+  scroll-margin-block-start: 4rem;
 }
 @media (forced-colors: active) {
   .navds-select__input.navds-select__input.navds-select__input {
@@ -852,6 +850,7 @@ li.navds-file-item {
 }
 .navds-switch--small > .navds-switch__input {
   height: 2rem;
+  width: 2.5rem;
   top: 0;
 }
 /* Label */
@@ -869,10 +868,10 @@ li.navds-file-item {
   padding: 0.75rem 3.25rem 0.75rem 0;
 }
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem;
 }
 .navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
 }
 .navds-switch--with-description,
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
@@ -900,7 +899,9 @@ li.navds-file-item {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .navds-switch--small > .navds-switch__track {
-  top: var(--a-spacing-1);
+  top: var(--a-spacing-1-alt);
+  width: 2.25rem;
+  height: 1.25rem;
 }
 .navds-switch--right > .navds-switch__input,
 .navds-switch--right > .navds-switch__track {
@@ -955,6 +956,10 @@ li.navds-file-item {
   align-items: center;
   justify-content: center;
 }
+.navds-switch--small .navds-switch__thumb {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
@@ -964,11 +969,12 @@ li.navds-file-item {
   left: 0;
   top: 0;
 }
-.navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
-  visibility: visible;
-}
-.navds-switch__checkmark {
-  visibility: hidden;
+.navds-switch--small > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1rem);
+  width: 1rem;
+  height: 1rem;
+  left: 0;
+  top: 0;
 }
 @media (hover: hover) and (pointer: fine) {
   .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
@@ -978,6 +984,10 @@ li.navds-file-item {
   .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
     transform: translateX(1.125rem);
   }
+
+  .navds-switch--small > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.875rem);
+  }
 }
 .navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(0);
@@ -985,6 +995,9 @@ li.navds-file-item {
 .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
 }
+.navds-switch--small > .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1rem);
+}
 /* Disabled */
 .navds-switch__input:disabled {
   appearance: none;
@@ -1085,6 +1098,7 @@ li.navds-file-item {
   min-height: 3rem;
   width: 100%;
   color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
+  scroll-margin-block-start: 4rem;
 }
 .navds-text-field__input[size] {
   width: auto;
@@ -1169,6 +1183,7 @@ li.navds-file-item {
   width: 100%;
   display: block;
   color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
+  scroll-margin-block-start: 4rem;
 }
 .navds-textarea__input::placeholder {
   color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));