@navikt/ds-css 5.16.0 → 5.17.1

package/dist/component/copybutton.min.css

@@ -1 +1 @@
-[data-theme=dark]{--__ac-copybutton-action-text:var(--a-blue-300);--__ac-copybutton-bg-hover:rgba(214,231,255,.13);--__ac-copybutton-icon-success:#33aa5f;--__ac-copybutton-neutral-text:rgba(231,240,254,.69);--__ac-copybutton-text:rgba(251,252,254,.96)}[data-theme=light]{--__ac-copybutton-action-text:initial;--__ac-copybutton-bg-hover:initial;--__ac-copybutton-icon-success:initial;--__ac-copybutton-neutral-text:initial;--__ac-copybutton-text:initial}.navds-copybutton{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);background:none;border:none;border-radius:var(--ac-copybutton-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;margin:0;padding:var(--__ac-copybutton-padding);place-content:center;text-decoration:none}.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5)}.navds-copybutton--small{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);min-height:2rem}.navds-copybutton--small.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3)}.navds-copybutton--xsmall{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);min-height:1.5rem}.navds-copybutton--xsmall.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2)}.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-3)}.navds-copybutton--small.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-1)}.navds-copybutton--xsmall.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-05)}.navds-copybutton--xsmall .navds-copybutton__icon{font-size:1.25rem}.navds-copybutton__icon{display:flex;font-size:1.5rem}.navds-copybutton__icon:first-of-type{margin-left:-.25rem}.navds-copybutton__icon:last-of-type{margin-right:-.25rem}.navds-copybutton__icon:only-child{margin:0}.navds-copybutton--active .navds-copybutton__icon{animation:akselCopyButtonIconAnimation 2s cubic-bezier(.215,.61,.355,1)}@keyframes akselCopyButtonIconAnimation{8%{transform:translateY(0)}17%{transform:translateY(-10%)}25%{transform:translateY(2%)}30%{transform:translateY(0)}}:where(.navds-copybutton--small,.navds-copybutton--xsmall):where(:not(:only-child)){margin:-.125rem}.navds-copybutton:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-copybutton:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-copybutton--action{background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));color:var(--ac-copybutton-action-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-action-hover-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--action:hover:where(:disabled),.navds-copybutton--action:where(:disabled){background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-action-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--__ac-copybutton-icon-success,var(--a-icon-success)))}.navds-copybutton--neutral{background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));color:var(--ac-copybutton-neutral-text,var(--__ac-copybutton-neutral-text,var(--a-text-subtle)))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-neutral-hover-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--neutral:hover:where(:disabled,.navds-copybutton--disabled),.navds-copybutton--neutral:where(:disabled,.navds-copybutton--disabled){background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-neutral-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--small>.navds-copybutton__content{gap:var(--a-spacing-1-alt)}.navds-copybutton--xsmall>.navds-copybutton__content{gap:var(--a-spacing-1)}.navds-copybutton--active>.navds-copybutton__content{animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear)}@keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}.navds-copybutton:where(:disabled){cursor:not-allowed;opacity:.3}
+[data-theme=dark]{--__ac-copybutton-action-text:var(--a-blue-300);--__ac-copybutton-bg-hover:rgba(214,231,255,.13);--__ac-copybutton-icon-success:#33aa5f;--__ac-copybutton-neutral-text:rgba(231,240,254,.69);--__ac-copybutton-text:rgba(251,252,254,.96)}[data-theme=light]{--__ac-copybutton-action-text:initial;--__ac-copybutton-bg-hover:initial;--__ac-copybutton-icon-success:initial;--__ac-copybutton-neutral-text:initial;--__ac-copybutton-text:initial}.navds-copybutton{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);background:none;border:none;border-radius:var(--ac-copybutton-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;margin:0;padding:var(--__ac-copybutton-padding);place-content:center;text-decoration:none}@media (forced-colors:active){.navds-copybutton{background-color:ButtonFace;border:1px solid ButtonText;color:ButtonText}.navds-copybutton.navds-copybutton:focus-visible{box-shadow:none;outline:2px solid highlight;outline-offset:2px}}.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5)}.navds-copybutton--small{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);min-height:2rem}.navds-copybutton--small.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3)}.navds-copybutton--xsmall{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);min-height:1.5rem}.navds-copybutton--xsmall.navds-copybutton--icon-right{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2)}.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-3)}.navds-copybutton--small.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-1)}.navds-copybutton--xsmall.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-05)}.navds-copybutton--xsmall .navds-copybutton__icon{font-size:1.25rem}.navds-copybutton__icon{display:flex;font-size:1.5rem}.navds-copybutton__icon:first-of-type{margin-left:-.25rem}.navds-copybutton__icon:last-of-type{margin-right:-.25rem}.navds-copybutton__icon:only-child{margin:0}.navds-copybutton--active .navds-copybutton__icon{animation:akselCopyButtonIconAnimation 2s cubic-bezier(.215,.61,.355,1)}@keyframes akselCopyButtonIconAnimation{8%{transform:translateY(0)}17%{transform:translateY(-10%)}25%{transform:translateY(2%)}30%{transform:translateY(0)}}:where(.navds-copybutton--small,.navds-copybutton--xsmall):where(:not(:only-child)){margin:-.125rem}.navds-copybutton:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-copybutton:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-copybutton--action{background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));color:var(--ac-copybutton-action-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-action-hover-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--action:hover:where(:disabled),.navds-copybutton--action:where(:disabled){background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-action-text,var(--__ac-copybutton-action-text,var(--a-text-action)))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--__ac-copybutton-icon-success,var(--a-icon-success)))}.navds-copybutton--neutral{background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));color:var(--ac-copybutton-neutral-text,var(--__ac-copybutton-neutral-text,var(--a-text-subtle)))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--__ac-copybutton-bg-hover,var(--a-surface-hover)));color:var(--ac-copybutton-neutral-hover-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--neutral:hover:where(:disabled,.navds-copybutton--disabled),.navds-copybutton--neutral:where(:disabled,.navds-copybutton--disabled){background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-neutral-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--__ac-copybutton-text,var(--a-text-default)))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--small>.navds-copybutton__content{gap:var(--a-spacing-1-alt)}.navds-copybutton--xsmall>.navds-copybutton__content{gap:var(--a-spacing-1)}.navds-copybutton--active>.navds-copybutton__content{animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear)}@keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}.navds-copybutton:where(:disabled){cursor:not-allowed;opacity:.3}@media (forced-colors:active){.navds-copybutton:where(:disabled){border-color:GrayText;opacity:1}}

package/dist/component/dropdown.css

@@ -58,13 +58,15 @@
 }
 
 .navds-dropdown__item:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-dropdown__item:focus {
-    outline: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
     box-shadow: inset 0 0 0 2px var(--a-border-focus);
   }
 }
@@ -75,3 +77,14 @@
   background: transparent;
   cursor: not-allowed;
 }
+
+@media (forced-colors: active) {
+  .navds-dropdown__item:hover {
+    color: highlight;
+  }
+
+  .navds-dropdown__item:disabled {
+    opacity: 1;
+    color: graytext;
+  }
+}

package/dist/component/dropdown.min.css

@@ -1 +1 @@
-.navds-dropdown__menu{color:var(--ac-dropdown-text,var(--a-text-default));max-height:616px;overflow:hidden;overflow-y:auto;padding:var(--a-spacing-2) 0;width:27ch}.navds-dropdown__divider{border:none;border-bottom:1px solid var(--a-border-divider);margin:var(--a-spacing-3) 0}.navds-dropdown__menu>:not(.navds-dropdown__divider):not(.navds-dropdown__list){margin:0 var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__list{list-style:none;margin:0;padding:0}.navds-dropdown__list-item{margin:0}.navds-dropdown__list-heading{margin:var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__item{align-items:center;background:transparent;border:none;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:pointer;display:flex;font:inherit;gap:var(--a-spacing-2);margin:0;overflow:visible;padding:var(--a-spacing-1) var(--a-spacing-4);text-align:left;text-decoration:none;width:100%}.navds-dropdown__item:hover{background-color:var(--ac-dropdown-item-hover-bg,var(--a-surface-action-subtle-hover))}.navds-dropdown__item:active{background-color:var(--ac-dropdown-item-active-bg,var(--a-surface-action-active));color:var(--ac-dropdown-item-active-text,var(--a-text-on-action))}.navds-dropdown__item:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:none}@supports not selector(:focus-visible){.navds-dropdown__item:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:none}}.navds-dropdown__item:disabled{background:transparent;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:not-allowed;opacity:.3}
+.navds-dropdown__menu{color:var(--ac-dropdown-text,var(--a-text-default));max-height:616px;overflow:hidden;overflow-y:auto;padding:var(--a-spacing-2) 0;width:27ch}.navds-dropdown__divider{border:none;border-bottom:1px solid var(--a-border-divider);margin:var(--a-spacing-3) 0}.navds-dropdown__menu>:not(.navds-dropdown__divider):not(.navds-dropdown__list){margin:0 var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__list{list-style:none;margin:0;padding:0}.navds-dropdown__list-item{margin:0}.navds-dropdown__list-heading{margin:var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__item{align-items:center;background:transparent;border:none;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:pointer;display:flex;font:inherit;gap:var(--a-spacing-2);margin:0;overflow:visible;padding:var(--a-spacing-1) var(--a-spacing-4);text-align:left;text-decoration:none;width:100%}.navds-dropdown__item:hover{background-color:var(--ac-dropdown-item-hover-bg,var(--a-surface-action-subtle-hover))}.navds-dropdown__item:active{background-color:var(--ac-dropdown-item-active-bg,var(--a-surface-action-active));color:var(--ac-dropdown-item-active-text,var(--a-text-on-action))}.navds-dropdown__item:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid transparent;outline-offset:-2px}@supports not selector(:focus-visible){.navds-dropdown__item:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid transparent;outline-offset:-2px}}.navds-dropdown__item:disabled{background:transparent;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:not-allowed;opacity:.3}@media (forced-colors:active){.navds-dropdown__item:hover{color:highlight}.navds-dropdown__item:disabled{color:graytext;opacity:1}}

package/dist/component/expansioncard.css

@@ -147,13 +147,13 @@
 }
 
 .navds-expansioncard__header-button:focus-visible {
-  outline: none;
+  outline: 3px solid transparent;
   box-shadow: var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-expansioncard__header-button:focus {
-    outline: none;
+    outline: 3px solid transparent;
     box-shadow: var(--a-shadow-focus);
   }
 }
@@ -224,3 +224,11 @@
     transform: translateY(0);
   }
 }
+
+@media (forced-colors: active) {
+  .navds-expansioncard:hover {
+    --__ac-expansioncard-border-color: highlight;
+
+    outline: 1px solid highlight;
+  }
+}

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;--__ac-expansioncard-padding-block:var(--a-spacing-4);--__ac-expansioncard-padding-inline:var(--a-spacing-6);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(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);position:relative;width:100%}.navds-expansioncard--small{--__ac-expansioncard-padding-block:var(--a-spacing-3);--__ac-expansioncard-padding-inline: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--open>:where(.navds-expansioncard__header):after{background-color:var(--a-border-divider);bottom:0;content:"";height:1px;left:var(--__ac-expansioncard-padding-inline);opacity:1;position:absolute;transition:opacity .1s cubic-bezier(.175,.885,.32,1.275);width:calc(100% - var(--__ac-expansioncard-padding-inline)*2)}.navds-expansioncard--open>:where(.navds-expansioncard__header:hover):after{opacity:0}.navds-expansioncard__title--small{margin-top:.625rem}.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__header) :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:transform .15s ease-in-out}.navds-expansioncard--open>:where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron){transform:translateY(0) rotate(180deg)}.navds-expansioncard__header-button:hover>:where(.navds-expansioncard__header-chevron){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)>:where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron){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{--__ac-expansioncard-padding-block:var(--a-spacing-3);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(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline) var(--__ac-expansioncard-padding-inline)}.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{animation:fadeExpansionCard .25s ease}.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner){animation:none}@keyframes fadeExpansionCard{0%{opacity:.25;transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;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(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);position:relative;width:100%}.navds-expansioncard--small{--__ac-expansioncard-padding-block:var(--a-spacing-3);--__ac-expansioncard-padding-inline: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--open>:where(.navds-expansioncard__header):after{background-color:var(--a-border-divider);bottom:0;content:"";height:1px;left:var(--__ac-expansioncard-padding-inline);opacity:1;position:absolute;transition:opacity .1s cubic-bezier(.175,.885,.32,1.275);width:calc(100% - var(--__ac-expansioncard-padding-inline)*2)}.navds-expansioncard--open>:where(.navds-expansioncard__header:hover):after{opacity:0}.navds-expansioncard__title--small{margin-top:.625rem}.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__header) :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:transform .15s ease-in-out}.navds-expansioncard--open>:where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron){transform:translateY(0) rotate(180deg)}.navds-expansioncard__header-button:hover>:where(.navds-expansioncard__header-chevron){transform:translateY(1px)}.navds-expansioncard__header-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:3px solid transparent}@supports not selector(:focus-visible){.navds-expansioncard__header-button:focus{box-shadow:var(--a-shadow-focus);outline:3px solid transparent}}.navds-expansioncard--open>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron){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{--__ac-expansioncard-padding-block:var(--a-spacing-3);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(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline) var(--__ac-expansioncard-padding-inline)}.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{animation:fadeExpansionCard .25s ease}.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner){animation:none}@keyframes fadeExpansionCard{0%{opacity:.25;transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;transform:translateY(0)}}@media (forced-colors:active){.navds-expansioncard:hover{--__ac-expansioncard-border-color:highlight;outline:1px solid highlight}}

package/dist/component/form.css

@@ -76,6 +76,12 @@
 .navds-fieldset:disabled > .navds-fieldset__description {
   opacity: 0.3;
 }
+@media (forced-colors: active) {
+  .navds-fieldset:disabled > .navds-fieldset__legend,
+  .navds-fieldset:disabled > .navds-fieldset__description {
+    opacity: 1;
+  }
+}
 .navds-form-field {
   display: grid;
   justify-items: start;
@@ -113,6 +119,11 @@
   flex-shrink: 0;
   align-self: flex-start;
 }
+@media (forced-colors: active) {
+  .navds-form-field--disabled {
+    opacity: 1;
+  }
+}
 .navds-error-summary {
   background-color: var(--ac-error-summary-bg, var(--a-surface-default));
   padding: var(--a-spacing-5);
@@ -158,6 +169,7 @@
   background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
   transition: background-color linear 100ms;
   justify-self: stretch;
+  position: relative;
 }
 .navds-confirmation-panel__content {
   max-width: 80ch;
@@ -170,6 +182,28 @@
   border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
   background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
 }
+@media (forced-colors: active) {
+  .navds-confirmation-panel__inner::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-left: 8px solid;
+    border-color: orange;
+    forced-color-adjust: none;
+    border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+    border-end-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  }
+
+  .navds-confirmation-panel--checked .navds-confirmation-panel__inner::before {
+    border-color: green;
+  }
+
+  .navds-confirmation-panel--error .navds-confirmation-panel__inner::before {
+    border-color: red;
+  }
+}
 .navds-checkbox,
 .navds-radio {
   position: relative;
@@ -235,6 +269,8 @@
 }
 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow:
     0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
     0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
@@ -243,6 +279,8 @@
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:focus + .navds-checkbox__label::before,
   .navds-radio__input:focus + .navds-radio__label::before {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
     box-shadow:
       0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
       0 0 0 4px var(--a-border-focus);
@@ -476,6 +514,83 @@
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   background-color: var(--a-icon-subtle);
 }
+@media (forced-colors: active) {
+  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+  .navds-radio__input:focus-visible + .navds-radio__label::before {
+    outline-color: highlight;
+  }
+
+  .navds-checkbox,
+  .navds-radio {
+    --__ac-radio-checkbox-high-contrast-bg: field;
+    --__ac-radio-checkbox-high-contrast-text: fieldtext;
+    --__ac-radio-checkbox-high-contrast-highlight: highlight;
+  }
+
+  .navds-checkbox__label::before,
+  .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+    color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline-offset: -4px;
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+  :not(.navds-radio--readonly) > .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+    color: highlight;
+  }
+
+  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before {
+    outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
+    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
+    outline-offset: -4px;
+    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox--disabled,
+  .navds-radio--disabled {
+    opacity: 1;
+
+    --__ac-radio-checkbox-high-contrast-bg: field;
+    --__ac-radio-checkbox-high-contrast-text: graytext;
+  }
+
+  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
+    color: graytext;
+  }
+}
 .navds-select__input {
   appearance: none;
   background-color: var(--ac-select-bg, var(--a-surface-default));
@@ -490,6 +605,20 @@
   padding: 0.5rem;
   padding-right: 2rem;
 }
+@media (forced-colors: active) {
+  .navds-select__input.navds-select__input.navds-select__input {
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    color: ButtonText;
+    forced-color-adjust: none;
+    box-shadow: none;
+  }
+
+  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
 .navds-select__input:hover {
   border-color: var(--ac-select-hover-bg, var(--a-border-action));
   cursor: pointer;
@@ -518,6 +647,11 @@
   align-self: center;
   color: var(--ac-select-text, var(--a-text-default));
 }
+@media (forced-colors: active) {
+  .navds-select__chevron {
+    color: ButtonText;
+  }
+}
 .navds-form-field--small .navds-select__input {
   min-height: 2rem;
   padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);
@@ -646,12 +780,15 @@
   background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
 }
 .navds-switch__input:focus-visible ~ .navds-switch__track {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   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 {
+    outline: 2px solid transparent;
     box-shadow:
       0 0 0 1px var(--a-surface-default),
       var(--a-shadow-focus);
@@ -737,6 +874,51 @@
     transform: translateX(1.25rem);
   }
 }
+@media (forced-colors: active) {
+  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+  .navds-switch__label-wrapper:hover {
+    color: highlight;
+  }
+
+  .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__thumb {
+    background-color: fieldtext;
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    color: field;
+  }
+
+  .navds-switch__track {
+    width: calc(2.75rem + 4px);
+    height: calc(1.5rem + 4px);
+    top: var(--a-spacing-3);
+    border: 2px solid fieldtext;
+  }
+
+  .navds-switch__input:focus-visible ~ .navds-switch__track {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) {
+    opacity: 1;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
+    background-color: graytext;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
+    border-color: graytext;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
+    color: graytext !important;
+  }
+}
 .navds-text-field__input {
   appearance: none;
   padding: var(--a-spacing-2);
@@ -761,7 +943,8 @@
   border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action)));
 }
 .navds-text-field__input:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
 }
 @supports not selector(:focus-visible) {
@@ -810,6 +993,12 @@
 .navds-text-field__input[type="search"]::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
+@media (forced-colors: active) {
+  .navds-text-field__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}
 .navds-textarea__wrapper {
   --__ac-textarea-height: initial;
 
@@ -837,12 +1026,14 @@
   border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action)));
 }
 .navds-textarea__input:focus-visible {
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
 }
 @supports not selector(:focus-visible) {
   .navds-textarea__input:focus {
-    outline: none;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
     box-shadow: var(--a-shadow-focus);
   }
 }
@@ -911,6 +1102,12 @@
   border-color: var(--a-border-subtle);
   cursor: default;
 }
+@media (forced-colors: active) {
+  .navds-textarea__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}
 .navds-search {
   display: flex;
   flex-direction: column;
@@ -982,13 +1179,13 @@
   color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action)));
 }
 .navds-search__button-clear:focus-visible {
+  outline: 2px solid transparent;
   box-shadow: var(--a-shadow-focus);
-  outline: none;
 }
 @supports not selector(:focus-visible) {
   .navds-search__button-clear:focus {
+    outline: 2px solid transparent;
     box-shadow: var(--a-shadow-focus);
-    outline: none;
   }
 }
 .navds-search__button-search {
@@ -1084,6 +1281,15 @@
     z-index: 1;
   }
 }
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+
+  .navds-search__button-clear:hover {
+    color: highlight;
+  }
+}
 .navds-combobox__wrapper {
   display: flex;
   flex-direction: column;
@@ -1118,6 +1324,8 @@
 }
 .navds-combobox--error
   .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   box-shadow:
     0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
     var(--a-shadow-focus);
@@ -1165,9 +1373,12 @@
     0 0 0 1px var(--a-surface-default) inset,
     var(--a-shadow-focus);
   box-shadow: var(--a-shadow-focus);
+  outline: 3px solid transparent;
+  outline-offset: 2px;
 }
 .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
   box-shadow: none;
+  outline: none;
 }
 @supports not selector(:focus-visible) {
   .navds-combobox__input:focus {
@@ -1181,10 +1392,13 @@
       0 0 0 1px var(--a-surface-default) inset,
       var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
     box-shadow: none;
+    outline: none;
   }
 }
 @supports not selector(:has) {
@@ -1193,10 +1407,13 @@
       0 0 0 1px var(--a-surface-default) inset,
       var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
   }
 
   .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
     box-shadow: none;
+    outline: none;
   }
 }
 .navds-combobox__button-clear {
@@ -1403,3 +1620,48 @@
     gap: var(--a-spacing-1);
   }
 }
+@media (forced-colors: active) {
+  .navds-combobox__button-clear:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+    outline-color: highlight;
+  }
+
+  .navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover
+    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list-item[data-no-focus="true"] {
+    opacity: 1;
+    color: graytext;
+  }
+
+  .navds-combobox__list-item--selected {
+    background-color: selecteditem;
+    color: selecteditemtext;
+  }
+
+  .navds-combobox__list-item--selected > * {
+    forced-color-adjust: none;
+  }
+
+  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__list-item--new-option--focus {
+    outline: 2px solid highlight;
+    outline-offset: -3px;
+  }
+}