@navikt/ds-css 3.0.0 → 3.1.0

package/dist/component/chips.css

@@ -63,6 +63,18 @@
   box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
 
+@supports not selector(:focus-visible) {
+  .navds-chips__toggle:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:focus,
+  .navds-chips__toggle:active:focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  }
+}
+
 .navds-chips__removable {
   gap: 0;
 }
@@ -117,6 +129,18 @@
   box-shadow: 0 0 0 2px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-chips__removable--action:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
+  }
+
+  .navds-chips__removable--neutral:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+}
+
 .navds-chips__removable--action:hover {
   background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
 }

package/dist/component/chips.min.css

@@ -1 +1 @@
-.navds-chips{display:flex;flex-wrap:wrap;gap:var(--a-spacing-2);list-style:none;margin:0;padding:0}.navds-chips :where(li){display:block;list-style:none;margin:0;padding:0}.navds-chips__chip{all:unset;align-items:center;border-radius:var(--a-border-radius-full);cursor:pointer;display:flex;gap:var(--a-spacing-05);justify-content:center;margin:0;min-height:32px;padding:0 var(--a-spacing-3);text-decoration:none}.navds-chips--small .navds-chips__chip{min-height:24px;padding:0 var(--a-spacing-2)}.navds-chips__toggle{background-color:var(--ac-chip-toggle-bg,var(--a-surface-neutral-subtle));box-shadow:inset 0 0 0 1px var(--ac-chip-toggle-border,var(--a-border-default));color:var(--ac-chip-toggle-text,var(--a-text-default))}.navds-chips__toggle:hover{background-color:var(--ac-chip-toggle-hover-bg,var(--a-surface-neutral-subtle-hover));box-shadow:inset 0 0 0 1px var(--ac-chip-toggle-hover-border,var(--a-border-strong))}.navds-chips__toggle[aria-pressed=true]{background-color:var(--ac-chip-toggle-pressed-bg,var(--a-surface-action-selected));box-shadow:none;color:var(--ac-chip-toggle-pressed-text,var(--a-text-on-action))}.navds-chips__toggle[aria-pressed=true]:hover{background-color:var(--ac-chip-toggle-pressed-hover-bg,var(--a-surface-action-selected-hover))}.navds-chips__toggle:focus-visible{box-shadow:0 0 0 2px var(--ac-chip-toggle-focus,var(--a-border-focus))}.navds-chips__toggle:active:focus-visible,.navds-chips__toggle[aria-pressed=true]:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),0 0 0 2px var(--ac-chip-toggle-focus,var(--a-border-focus))}.navds-chips__removable{gap:0}.navds-chips__removable--action{background-color:var(--ac-chip-removable-action-bg,var(--a-surface-action-selected));color:var(--ac-chip-removable-action-text,var(--a-text-on-action))}.navds-chips__removable--neutral{background-color:var(--ac-chip-removable-neutral-bg,var(--a-surface-neutral-subtle));box-shadow:inset 0 0 0 1px var(--ac-chip-removable-neutral-border,var(--a-border-default));color:var(--ac-chip-removable-neutral-text,var(--a-text-default))}.navds-chips__removable-icon{font-size:1.25rem}.navds-chips__removable-icon,.navds-chips__toggle-icon{border-radius:var(--a-border-radius-full);display:grid;height:1.5rem;place-items:center;width:1.5rem}.navds-chips--small .navds-chips__removable-icon,.navds-chips--small .navds-chips__toggle-icon{height:1.25rem;width:1.25rem}.navds-chips--small .navds-chips__removable-icon>svg{width:1rem}.navds-chips__removable--action:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),0 0 0 2px var(--a-border-focus)}.navds-chips__removable--neutral:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus)}.navds-chips__removable--action:hover{background-color:var(--ac-chip-removable-action-hover-bg,var(--a-surface-action-selected-hover))}.navds-chips__removable--neutral:hover{background-color:var(--ac-chip-removable-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));box-shadow:inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border,var(--a-border-strong))}.navds-chips--icon-left{padding-left:.375rem}.navds-chips--icon-right{padding-right:.375rem}.navds-chips--small .navds-chips--icon-right{padding-right:var(--a-spacing-05)}.navds-chips--small .navds-chips--icon-left{padding-left:.375rem}
+.navds-chips{display:flex;flex-wrap:wrap;gap:var(--a-spacing-2);list-style:none;margin:0;padding:0}.navds-chips :where(li){display:block;list-style:none;margin:0;padding:0}.navds-chips__chip{all:unset;align-items:center;border-radius:var(--a-border-radius-full);cursor:pointer;display:flex;gap:var(--a-spacing-05);justify-content:center;margin:0;min-height:32px;padding:0 var(--a-spacing-3);text-decoration:none}.navds-chips--small .navds-chips__chip{min-height:24px;padding:0 var(--a-spacing-2)}.navds-chips__toggle{background-color:var(--ac-chip-toggle-bg,var(--a-surface-neutral-subtle));box-shadow:inset 0 0 0 1px var(--ac-chip-toggle-border,var(--a-border-default));color:var(--ac-chip-toggle-text,var(--a-text-default))}.navds-chips__toggle:hover{background-color:var(--ac-chip-toggle-hover-bg,var(--a-surface-neutral-subtle-hover));box-shadow:inset 0 0 0 1px var(--ac-chip-toggle-hover-border,var(--a-border-strong))}.navds-chips__toggle[aria-pressed=true]{background-color:var(--ac-chip-toggle-pressed-bg,var(--a-surface-action-selected));box-shadow:none;color:var(--ac-chip-toggle-pressed-text,var(--a-text-on-action))}.navds-chips__toggle[aria-pressed=true]:hover{background-color:var(--ac-chip-toggle-pressed-hover-bg,var(--a-surface-action-selected-hover))}.navds-chips__toggle:focus-visible{box-shadow:0 0 0 2px var(--ac-chip-toggle-focus,var(--a-border-focus))}.navds-chips__toggle:active:focus-visible,.navds-chips__toggle[aria-pressed=true]:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),0 0 0 2px var(--ac-chip-toggle-focus,var(--a-border-focus))}@supports not selector(:focus-visible){.navds-chips__toggle:focus{box-shadow:0 0 0 2px var(--ac-chip-toggle-focus,var(--a-border-focus));outline:none}.navds-chips__toggle:active:focus,.navds-chips__toggle[aria-pressed=true]:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),0 0 0 2px var(--ac-chip-toggle-focus,var(--a-border-focus))}}.navds-chips__removable{gap:0}.navds-chips__removable--action{background-color:var(--ac-chip-removable-action-bg,var(--a-surface-action-selected));color:var(--ac-chip-removable-action-text,var(--a-text-on-action))}.navds-chips__removable--neutral{background-color:var(--ac-chip-removable-neutral-bg,var(--a-surface-neutral-subtle));box-shadow:inset 0 0 0 1px var(--ac-chip-removable-neutral-border,var(--a-border-default));color:var(--ac-chip-removable-neutral-text,var(--a-text-default))}.navds-chips__removable-icon{font-size:1.25rem}.navds-chips__removable-icon,.navds-chips__toggle-icon{border-radius:var(--a-border-radius-full);display:grid;height:1.5rem;place-items:center;width:1.5rem}.navds-chips--small .navds-chips__removable-icon,.navds-chips--small .navds-chips__toggle-icon{height:1.25rem;width:1.25rem}.navds-chips--small .navds-chips__removable-icon>svg{width:1rem}.navds-chips__removable--action:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),0 0 0 2px var(--a-border-focus)}.navds-chips__removable--neutral:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-chips__removable--action:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),0 0 0 2px var(--a-border-focus);outline:none}.navds-chips__removable--neutral:focus{box-shadow:0 0 0 2px var(--a-border-focus);outline:none}}.navds-chips__removable--action:hover{background-color:var(--ac-chip-removable-action-hover-bg,var(--a-surface-action-selected-hover))}.navds-chips__removable--neutral:hover{background-color:var(--ac-chip-removable-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));box-shadow:inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border,var(--a-border-strong))}.navds-chips--icon-left{padding-left:.375rem}.navds-chips--icon-right{padding-right:.375rem}.navds-chips--small .navds-chips--icon-right{padding-right:var(--a-spacing-05)}.navds-chips--small .navds-chips--icon-left{padding-left:.375rem}

package/dist/component/date.css

@@ -73,16 +73,30 @@
   border-radius: var(--a-border-radius-xlarge);
 }
 
-.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
-.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
   box-shadow: var(--a-shadow-focus);
 }
 
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
+  .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
+.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
+  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 /* Monthpicker */
 
 .navds-date__month-button {
@@ -95,12 +109,20 @@
   cursor: pointer;
 }
 
-.navds-date__month-button:focus,
-.navds-monthpicker__caption-button:focus {
+.navds-date__month-button:focus-visible,
+.navds-monthpicker__caption-button:focus-visible {
   box-shadow: var(--a-shadow-focus);
   z-index: 1;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-date__month-button:focus,
+  .navds-monthpicker__caption-button:focus {
+    box-shadow: var(--a-shadow-focus);
+    z-index: 1;
+  }
+}
+
 .navds-date__year-label {
   display: flex;
   align-items: center;
@@ -128,11 +150,17 @@
 
 /* Focus layering */
 
-.navds-date__field-input:focus,
+.navds-date__field-input:focus-visible,
 .navds-date__field-button {
   z-index: 1;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-date__field-input:focus {
+    z-index: 1;
+  }
+}
+
 .navds-date .rdp-day_selected,
 .navds-monthpicker__month--selected {
   color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -186,10 +214,16 @@
   box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
 }
 
-.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
+    box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
+
 .navds-date__field-button {
   position: absolute;
   right: var(--a-spacing-2);

package/dist/component/date.min.css

@@ -1 +1 @@
-.navds-date{padding:var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;background:var(--ac-date-week-bg,var(--a-surface-neutral));border-radius:var(--a-border-radius-small);color:var(--ac-date-week-text,var(--a-text-on-neutral));display:flex;font-size:var(--a-font-size-small);justify-content:center;padding:var(--a-spacing-05) var(--a-spacing-1)}.navds-date__caption-dropdown{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:space-between}.navds-date__caption__month-wrapper{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:center}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-small)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus{box-shadow:var(--a-shadow-focus)}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:2.75rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date__field-button,.navds-date__field-input:focus{z-index:1}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:space-between}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-8)}.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}.navds-date__field-button{color:var(--ac-date-input-button-text,var(--a-text-default));position:absolute;right:var(--a-spacing-2);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{height:1.5rem;right:var(--a-spacing-2);width:1.5rem}.navds-form-field--small .navds-date__field-button svg{font-size:var(--a-font-size-medium)}.navds-form-field--disabled .navds-date__field-button{opacity:1}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}
+.navds-date{padding:var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;background:var(--ac-date-week-bg,var(--a-surface-neutral));border-radius:var(--a-border-radius-small);color:var(--ac-date-week-text,var(--a-text-on-neutral));display:flex;font-size:var(--a-font-size-small);justify-content:center;padding:var(--a-spacing-05) var(--a-spacing-1)}.navds-date__caption-dropdown{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:space-between}.navds-date__caption__month-wrapper{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:center}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-small)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:2.75rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date__field-button,.navds-date__field-input:focus-visible{z-index:1}@supports not selector(:focus-visible){.navds-date__field-input:focus{z-index:1}}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:space-between}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-8)}.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{color:var(--ac-date-input-button-text,var(--a-text-default));position:absolute;right:var(--a-spacing-2);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{height:1.5rem;right:var(--a-spacing-2);width:1.5rem}.navds-form-field--small .navds-date__field-button svg{font-size:var(--a-font-size-medium)}.navds-form-field--disabled .navds-date__field-button{opacity:1}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}

package/dist/component/expansioncard.css

@@ -125,12 +125,16 @@
   transform: translateY(1px);
 }
 
-.navds-expansioncard__header-button:focus {
+.navds-expansioncard__header-button:focus-visible {
   outline: none;
+  box-shadow: var(--a-shadow-focus);
 }
 
-.navds-expansioncard__header-button:focus-visible {
-  box-shadow: var(--a-shadow-focus);
+@supports not selector(:focus-visible) {
+  .navds-expansioncard__header-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
 }
 
 .navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {

package/dist/component/expansioncard.min.css

@@ -1,3 +1,3 @@
 .navds-expansioncard{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-color,var(--a-border-default));--__ac-expansioncard-border-radius:var(--ac-expansioncard-border-radius,var(--a-border-radius-large));--__ac-expansioncard-border-width:1px;background-color:var(--ac-expansioncard-bg,var(--a-surface-default));border-radius:var(--__ac-expansioncard-border-radius);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.navds-expansioncard--open{--__ac-expansioncard-border-color:var(
     --ac-expansioncard-border-open-color,var(--ac-expansioncard-border-color,var(--a-border-default))
-  )}.navds-expansioncard:hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}:where(.navds-expansioncard.navds-expansioncard--open):hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}.navds-expansioncard__header{background-color:var(--ac-expansioncard-header-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-radius:var(--__ac-expansioncard-border-radius);display:flex;gap:var(--a-spacing-4);justify-content:space-between;padding:var(--a-spacing-4) var(--a-spacing-6);position:relative;width:100%}.navds-expansioncard--small>:where(.navds-expansioncard__header){padding:var(--a-spacing-3) var(--a-spacing-4)}.navds-expansioncard__header:hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:0 0 0 1px var(--__ac-expansioncard-border-color)}.navds-expansioncard--open>:where(.navds-expansioncard__header){background-color:var(--ac-expansioncard-header-open-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.navds-expansioncard--open>:where(.navds-expansioncard__header):hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 -1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__title--small{margin-top:10px}.navds-expansioncard__title--medium{margin-top:var(--a-spacing-2)}.navds-expansioncard__title--large{margin-top:var(--a-spacing-1)}.navds-expansioncard--small :where(.navds-expansioncard__title--small){margin-top:var(--a-spacing-05)}.navds-expansioncard--small :where(.navds-expansioncard__title--medium,.navds-expansioncard__title--large){margin-top:0}.navds-expansioncard__header-button{align-self:flex-start;background:transparent;border:none;border-radius:var(--ac-expansioncard-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;font-size:1.5rem;margin:0;min-height:3rem;min-width:3rem;place-content:center}.navds-expansioncard--small>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button){min-height:2rem;min-width:2rem}:where(.navds-expansioncard__header):hover>:where(.navds-expansioncard__header-button){background-color:var(--a-surface-hover)}.navds-expansioncard__header-chevron{transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out,-webkit-transform .15s ease-in-out}.navds-expansioncard--open :where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}.navds-expansioncard__header-button:hover>:where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(1px);transform:translateY(1px)}.navds-expansioncard__header-button:focus{outline:none}.navds-expansioncard__header-button:focus-visible{box-shadow:var(--a-shadow-focus)}.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(-1px) rotate(180deg);transform:translateY(-1px) rotate(180deg)}.navds-expansioncard__header-button:after{content:"";cursor:pointer;height:100%;inset:0;position:absolute;width:100%;z-index:1}.navds-expansioncard__content{border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-end-end-radius:var(--__ac-expansioncard-border-radius);border-end-start-radius:var(--__ac-expansioncard-border-radius);border-top:none;padding:var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6)}.navds-expansioncard--small>:where(.navds-expansioncard__content){padding:var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4)}.navds-expansioncard__content--closed{display:none}:where(.navds-expansioncard__header):hover+.navds-expansioncard__content{box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__content-inner{-webkit-animation:fadeExpansionCard .25s ease;animation:fadeExpansionCard .25s ease}.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner){-webkit-animation:none;animation:none}@-webkit-keyframes fadeExpansionCard{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeExpansionCard{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
+  )}.navds-expansioncard:hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}:where(.navds-expansioncard.navds-expansioncard--open):hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}.navds-expansioncard__header{background-color:var(--ac-expansioncard-header-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-radius:var(--__ac-expansioncard-border-radius);display:flex;gap:var(--a-spacing-4);justify-content:space-between;padding:var(--a-spacing-4) var(--a-spacing-6);position:relative;width:100%}.navds-expansioncard--small>:where(.navds-expansioncard__header){padding:var(--a-spacing-3) var(--a-spacing-4)}.navds-expansioncard__header:hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:0 0 0 1px var(--__ac-expansioncard-border-color)}.navds-expansioncard--open>:where(.navds-expansioncard__header){background-color:var(--ac-expansioncard-header-open-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.navds-expansioncard--open>:where(.navds-expansioncard__header):hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 -1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__title--small{margin-top:10px}.navds-expansioncard__title--medium{margin-top:var(--a-spacing-2)}.navds-expansioncard__title--large{margin-top:var(--a-spacing-1)}.navds-expansioncard--small :where(.navds-expansioncard__title--small){margin-top:var(--a-spacing-05)}.navds-expansioncard--small :where(.navds-expansioncard__title--medium,.navds-expansioncard__title--large){margin-top:0}.navds-expansioncard__header-button{align-self:flex-start;background:transparent;border:none;border-radius:var(--ac-expansioncard-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;font-size:1.5rem;margin:0;min-height:3rem;min-width:3rem;place-content:center}.navds-expansioncard--small>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button){min-height:2rem;min-width:2rem}:where(.navds-expansioncard__header):hover>:where(.navds-expansioncard__header-button){background-color:var(--a-surface-hover)}.navds-expansioncard__header-chevron{transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out,-webkit-transform .15s ease-in-out}.navds-expansioncard--open :where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}.navds-expansioncard__header-button:hover>:where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(1px);transform:translateY(1px)}.navds-expansioncard__header-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-expansioncard__header-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron){-webkit-transform:translateY(-1px) rotate(180deg);transform:translateY(-1px) rotate(180deg)}.navds-expansioncard__header-button:after{content:"";cursor:pointer;height:100%;inset:0;position:absolute;width:100%;z-index:1}.navds-expansioncard__content{border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-end-end-radius:var(--__ac-expansioncard-border-radius);border-end-start-radius:var(--__ac-expansioncard-border-radius);border-top:none;padding:var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6)}.navds-expansioncard--small>:where(.navds-expansioncard__content){padding:var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4)}.navds-expansioncard__content--closed{display:none}:where(.navds-expansioncard__header):hover+.navds-expansioncard__content{box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__content-inner{-webkit-animation:fadeExpansionCard .25s ease;animation:fadeExpansionCard .25s ease}.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner){-webkit-animation:none;animation:none}@-webkit-keyframes fadeExpansionCard{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeExpansionCard{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}

package/dist/component/form.css

@@ -11,7 +11,7 @@
   margin-top: var(--a-spacing-2);
 }
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: var(--a-spacing-1);
+  margin-top: 0.125rem;
 }
 /* Applied when hideLegend is applied to fieldset */
 .navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
@@ -30,7 +30,7 @@
   gap: var(--a-spacing-2);
 }
 .navds-form-field__description {
-  margin-top: -4px;
+  margin-top: -6px;
 }
 .navds-form-field .navds-error-message,
 .navds-fieldset .navds-error-message {
@@ -48,6 +48,9 @@
 .navds-form-field__error:empty {
   display: none;
 }
+.navds-form-field__subdescription {
+  color: var(--ac-form-subdescription, var(--a-text-subtle));
+}
 .navds-error-summary {
   background-color: var(--ac-error-summary-bg, var(--a-surface-default));
   padding: var(--a-spacing-5);
@@ -56,10 +59,16 @@
 .navds-error-summary--small {
   padding: var(--a-spacing-3);
 }
-.navds-error-summary:focus {
+.navds-error-summary:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
+@supports not selector(:focus-visible) {
+  .navds-error-summary:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
 .navds-error-summary__list {
   margin: var(--a-spacing-3) 0;
   display: flex;
@@ -138,7 +147,7 @@
 .navds-radio__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
 }
 .navds-checkbox--small > .navds-checkbox__input,
 .navds-radio--small > .navds-radio__input {
@@ -156,14 +165,26 @@
   width: 1.25rem;
   height: 1.25rem;
 }
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
+.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+.navds-radio__input:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
 }
-.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus + .navds-radio__label::before {
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before,
+  .navds-radio__input:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  }
+}
+.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+  .navds-radio__input:hover:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  }
+}
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
   box-shadow: none;
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
@@ -193,27 +214,46 @@
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-position: 4px center;
 }
-.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
   box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+    box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
 .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
     inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
-.navds-radio__input:checked:focus + .navds-radio__label::before {
+.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
     inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-radio__input:checked:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
   color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
-.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):not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
+@supports not selector(:focus-visible) {
+  .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 {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  }
+}
 .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 {
   background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
@@ -225,25 +265,50 @@
   box-shadow: inset 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-visible:not(:hover):not(:disabled):not(:checked):not(: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-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-checkbox--error
+    > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
 .navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
   + .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):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 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-visible:hover:not(:disabled):not(:checked):not(: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-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-checkbox--error
+    > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+    box-shadow: inset 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__label::before,
+  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
 .navds-checkbox--disabled,
 .navds-radio--disabled {
   opacity: 0.3;
@@ -271,10 +336,16 @@
 .navds-select__input:hover {
   border-color: var(--ac-select-hover-bg, var(--a-border-action));
 }
-.navds-select__input:focus {
+.navds-select__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-select__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 .navds-select__container {
   position: relative;
   display: flex;
@@ -353,7 +424,7 @@
 .navds-switch__content {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-1);
+  gap: 0.125rem;
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
@@ -410,9 +481,14 @@
 .navds-switch__input:checked:disabled ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-bg, var(--a-border-success));
 }
-.navds-switch__input:focus ~ .navds-switch__track {
+.navds-switch__input:focus-visible ~ .navds-switch__track {
   box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-switch__input:focus ~ .navds-switch__track {
+    box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
 /* Thumb */
 .navds-switch__thumb {
   background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
@@ -507,10 +583,16 @@
 .navds-text-field__input:hover {
   border-color: var(--ac-textfield-hover-border, var(--a-border-action));
 }
-.navds-text-field__input:focus {
+.navds-text-field__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-text-field__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 /**
   Error handling
 */
@@ -518,9 +600,14 @@
   border-color: var(--ac-textfield-error-border, var(--a-border-danger));
   box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
 }
-.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(: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) {
+    box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
+  }
+}
 /* Disabled handling */
 .navds-text-field__input:disabled {
   background-color: var(--ac-textfield-bg, var(--a-surface-default));
@@ -567,10 +654,16 @@
 .navds-textarea__input:hover {
   border-color: var(--ac-textarea-hover-border, var(--a-border-action));
 }
-.navds-textarea__input:focus {
+.navds-textarea__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-textarea__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
 .navds-form-field--small .navds-textarea__input {
   padding: 6px;
 }
@@ -596,10 +689,16 @@
 /**
   Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
   border-color: 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) {
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
+    border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+  }
+}
 .navds-textarea__input:disabled {
   background-color: var(--ac-textarea-bg, var(--a-surface-default));
   border-color: var(--ac-textarea-border, var(--a-border-default));
@@ -679,10 +778,16 @@
 .navds-search__button-clear:hover {
   color: var(--ac-search-clear-icon-hover, var(--a-text-action));
 }
-.navds-search__button-clear:focus {
+.navds-search__button-clear:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
+@supports not selector(:focus-visible) {
+  .navds-search__button-clear:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
 .navds-search__button-search {
   flex-shrink: 0;
   min-width: 64px;
@@ -712,26 +817,49 @@
 .navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
   z-index: auto;
 }
-.navds-search__button-search.navds-button--secondary:focus {
+.navds-search__button-search.navds-button--secondary:focus-visible {
   box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
 }
-.navds-search__button-search.navds-button--secondary:focus:hover {
+.navds-search__button-search.navds-button--secondary:focus-visible:hover {
   box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
 }
-.navds-search__button-search.navds-button--secondary:focus:active {
+.navds-search__button-search.navds-button--secondary:focus-visible:active {
   box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
 }
+@supports not selector(:focus-visible) {
+  .navds-search__button-search.navds-button--secondary:focus {
+    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:hover {
+    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:active {
+    box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
+  }
+}
 /* Error-handling */
 .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
   border-color: var(--ac-search-error-border, var(--a-border-danger));
   box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
 }
-.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 /* Focus layering */
-.navds-search__input:focus,
+.navds-search__input:focus-visible,
 .navds-search__button-clear,
-.navds-search__button-search:focus {
+.navds-search__button-search:focus-visible {
   z-index: 1;
 }
+@supports not selector(:focus-visible) {
+  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+
+  .navds-search__input:focus,
+  .navds-search__button-search:focus {
+    z-index: 1;
+  }
+}