@fkui/design 6.37.0 → 6.39.0

package/lib/fkui.css

@@ -87,7 +87,7 @@ p {
 
 b,
 strong {
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
 }
 
 code {
@@ -115,7 +115,7 @@ h5,
 .heading--h5,
 h6,
 .heading--h6 {
-  font-weight: var(--f-font-weight-bold, 900);
+  font-weight: var(--f-font-weight-bold, 700);
   margin-bottom: 0.25rem;
   line-height: var(--f-line-height-medium, 1.4);
 }
@@ -152,7 +152,7 @@ h6, .heading--h6 {
 
 .heading--strong {
   font-size: var(--f-font-size-large, 1.125rem);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
 }
 
 * + h1, * + .heading--h1,
@@ -190,7 +190,7 @@ h6, .heading--h6 {
   }
   .heading--strong {
     font-size: var(--f-font-size-large, 1.125rem);
-    font-weight: var(--f-font-weight-medium, 700);
+    font-weight: var(--f-font-weight-medium, 600);
   }
 }
 .heading--h1 {
@@ -1096,7 +1096,7 @@ input[type=search]:focus,
   text-decoration-thickness: 2px;
   text-underline-offset: 0.25em;
   text-decoration-color: var(--fkds-color-action-text-primary-default, #4a52b6);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   line-height: var(--f-line-height-large, 1.5);
 }
 .anchor:hover, .file-item__file-open:hover {
@@ -1270,7 +1270,7 @@ input[type=search]:focus,
   cursor: pointer;
   display: inline-block;
   font-size: var(--f-font-size-standard, 1rem);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   justify-content: center;
   align-items: center;
   letter-spacing: var(--f-button-letter-spacing, 0.01rem);
@@ -1389,9 +1389,10 @@ input[type=search]:focus,
 .button.button--discrete, .button--discrete.calendar-navbar__year-selector-button, .button.button--text, .button--text.calendar-navbar__year-selector-button {
   width: inherit;
   min-width: 0;
-  font-weight: var(--f-font-weight-bold, 900);
+  font-weight: var(--f-font-weight-bold, 700);
   outline-offset: 0.25rem;
   line-height: calc(1.25 * var(--f-font-size-standard, 1rem));
+  align-items: flex-start;
   background-color: transparent;
   border-color: transparent;
   border-width: 0;
@@ -1439,10 +1440,13 @@ input[type=search]:focus,
 .button.button--discrete, .button--discrete.calendar-navbar__year-selector-button, .button.button--text, .button--text.calendar-navbar__year-selector-button, .button.button--discrete:focus, .button.button--discrete:active, .button.button--discrete:hover {
   border-radius: var(--f-button-discrete-radius-hover, none);
 }
+.button.button--discrete > .button__icon, .button--discrete.calendar-navbar__year-selector-button > .button__icon, .button.button--text > .button__icon, .button--text.calendar-navbar__year-selector-button > .button__icon {
+  flex-shrink: 0;
+}
 .button.button--discrete-inverted, .button--discrete-inverted.calendar-navbar__year-selector-button {
   width: inherit;
   min-width: 0;
-  font-weight: var(--f-font-weight-bold, 900);
+  font-weight: var(--f-font-weight-bold, 700);
   outline-offset: 0.25rem;
   /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */
   padding-top: calc(var(--f-button-discrete-padding-top, initial) * var(--f-density-factor, 1));
@@ -1488,7 +1492,7 @@ input[type=search]:focus,
 .button.button--tertiary, .calendar-navbar__year-selector-button {
   width: inherit;
   min-width: 0;
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   outline-offset: 0.25rem;
   background-color: transparent;
   border-color: transparent;
@@ -1703,7 +1707,7 @@ input[type=search]:focus,
 .calendar-day {
   align-items: center;
   display: inline-flex;
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   justify-content: center;
   height: 2.75rem;
   width: 100%;
@@ -1824,7 +1828,7 @@ input[type=search]:focus,
 .card__header-label {
   color: var(--fkds-color-text-primary, #1b1e23);
   font-size: var(--f-font-size-large, 1.125rem);
-  font-weight: var(--f-font-weight-bold, 900);
+  font-weight: var(--f-font-weight-bold, 700);
   line-height: var(--f-line-height-large, 1.5);
   margin-bottom: calc(0.25rem * var(--f-density-factor, 1));
   display: block;
@@ -2025,6 +2029,7 @@ input[type=search]:focus,
   }
 }
 .checkbox.disabled .checkbox__label {
+  color: var(--fkds-color-text-disabled, #8d8e91);
   cursor: default;
 }
 .checkbox.disabled .checkbox__label::before {
@@ -2087,7 +2092,7 @@ input[type=search]:focus,
   display: flex;
   align-items: center;
   cursor: pointer;
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   padding: 0.5rem 1rem;
   border-radius: 20px;
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
@@ -2170,7 +2175,7 @@ input[type=search]:focus,
   display: flex;
   align-items: center;
   cursor: pointer;
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   padding: 0.5rem 1rem;
   border-radius: 20px;
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
@@ -2279,7 +2284,7 @@ input[type=search]:focus,
 .calendar__year-selector__year--highlight, .combobox__listbox__option--highlight {
   background-color: var(--fkds-color-select-background-primary-default, #4a52b6);
   color: var(--fkds-color-text-inverted, #fff);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
 }
 @media (forced-colors: active) {
   .calendar__year-selector__year--highlight, .combobox__listbox__option--highlight {
@@ -2318,6 +2323,7 @@ input[type=search]:focus,
   display: flex;
   align-items: center;
   padding: 0.75rem;
+  margin: 0.5rem 0;
 }
 .contextmenu__list__item a,
 .contextmenu__list__item a:visited,
@@ -2457,7 +2463,7 @@ input[type=search]:focus,
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   font-size: var(--f-font-size-standard, 1rem);
   text-align: left;
   cursor: pointer;
@@ -2474,7 +2480,7 @@ input[type=search]:focus,
   border-radius: var(--f-border-radius-medium, 4px);
   box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0,0,0,.3));
   font-size: var(--f-font-size-standard, 1rem);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   transition: background-color var(--f-animation-duration-medium, 350ms) ease-out;
   display: inline-flex;
   justify-content: space-between;
@@ -2539,8 +2545,8 @@ input[type=search]:focus,
   display: list-item;
 }
 
-.offline .icon, .icon, .offline .icon-stack, .icon-stack,
-.icon--stack {
+.offline .icon, .icon-stack,
+.icon--stack, .offline .icon-stack, .icon {
   display: inline-block;
   height: var(--f-icon-size-small, 1rem);
   max-height: 100%;
@@ -2559,15 +2565,6 @@ input[type=search]:focus,
   width: var(--f-icon-size-large, 1.5rem);
 }
 
-.offline .icon-stack, .icon-stack,
-.icon--stack {
-  position: relative;
-}
-.icon-stack .icon,
-.icon--stack .icon {
-  position: absolute;
-}
-
 .icon--flip-horizontal {
   transform: scaleX(-1);
 }
@@ -2584,14 +2581,12 @@ input[type=search]:focus,
   transform: rotate(270deg);
 }
 
-.icon-stack--new-window .icon.f-icon-new-window,
 .icon--new-window .icon.f-icon-new-window {
   width: 55%;
   height: 55%;
   top: 0;
   right: 0;
 }
-.icon-stack--new-window .icon:not(.f-icon-new-window),
 .icon--new-window .icon:not(.f-icon-new-window) {
   width: 83%;
   height: 83%;
@@ -2599,101 +2594,6 @@ input[type=search]:focus,
   left: 5%;
 }
 
-.icon-stack--tooltip .f-icon-circle,
-.icon--stack--tooltip .f-icon-circle {
-  fill: var(--fkds-color-action-background-primary-default, #4a52b6);
-  color: var(--fkds-color-action-border-primary-default, #4a52b6);
-}
-.icon-stack--tooltip .f-icon-i,
-.icon--stack--tooltip .f-icon-i {
-  color: var(--fkds-color-text-inverted, #fff);
-}
-.icon-stack--info .f-icon-circle,
-.icon--stack--info .f-icon-circle {
-  color: var(--fkds-color-feedback-background-info, #f5f6fa);
-  fill: var(--fkds-color-feedback-border-info, #4a52b6);
-}
-.icon-stack--info .f-icon-i,
-.icon--stack--info .f-icon-i {
-  color: var(--fkds-color-text-primary, #1b1e23);
-}
-.icon-stack--warning .f-icon-circle,
-.icon--stack--warning .f-icon-circle {
-  color: var(--fkds-color-feedback-background-warning, #fffcf3);
-  fill: var(--fkds-color-feedback-border-warning, #ffbe10);
-}
-.icon-stack--warning .f-icon-alert,
-.icon--stack--warning .f-icon-alert {
-  color: var(--fkds-color-text-primary, #1b1e23);
-}
-.icon-stack--error .f-icon-triangle,
-.icon--stack--error .f-icon-triangle {
-  color: var(--fkds-color-feedback-background-negative, #fcf3f3);
-  fill: var(--fkds-color-feedback-border-negative, #ca1515);
-}
-.icon-stack--error .f-icon-alert,
-.icon--stack--error .f-icon-alert {
-  color: var(--fkds-color-text-primary, #1b1e23);
-}
-.icon-stack--success .f-icon-circle,
-.icon--stack--success .f-icon-circle {
-  color: var(--fkds-color-feedback-background-positive, #f3f8f5);
-  fill: var(--fkds-color-feedback-border-positive, #35805b);
-}
-.icon-stack--success .f-icon-success,
-.icon--stack--success .f-icon-success {
-  color: var(--fkds-color-text-primary, #1b1e23);
-  transform: scale(0.6);
-}
-.icon-stack--large,
-.icon--stack--large {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-.icon-stack--large svg,
-.icon--stack--large svg {
-  width: 100%;
-  height: 100%;
-}
-.icon-stack--circle, .icon-stack--circle-bottom,
-.icon--stack--circle,
-.icon--stack--circle-bottom {
-  width: 4rem;
-  height: 4rem;
-  border-radius: 100%;
-  overflow: hidden;
-}
-.icon-stack--circle .f-icon-circle, .icon-stack--circle-bottom .f-icon-circle,
-.icon--stack--circle .f-icon-circle,
-.icon--stack--circle-bottom .f-icon-circle {
-  color: var(--f-icon-color-success-background, #dbe9e2);
-  fill: var(--f-icon-color-success-background, #dbe9e2);
-  width: 100%;
-  height: 100%;
-}
-.icon-stack--circle .icon:not(.f-icon-circle), .icon-stack--circle-bottom .icon:not(.f-icon-circle),
-.icon--stack--circle .icon:not(.f-icon-circle),
-.icon--stack--circle-bottom .icon:not(.f-icon-circle) {
-  color: var(--f-icon-color-success, #35805b);
-  position: absolute;
-}
-.icon-stack--circle .icon:not(.f-icon-circle),
-.icon--stack--circle .icon:not(.f-icon-circle) {
-  width: 70%;
-  height: 70%;
-  inset: 0;
-  margin: auto;
-}
-.icon-stack--circle-bottom .icon:not(.f-icon-circle),
-.icon--stack--circle-bottom .icon:not(.f-icon-circle) {
-  width: 80%;
-  height: 80%;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  bottom: 0%;
-}
-
 .expandable-panel {
   margin-bottom: calc(2rem * var(--f-density-factor, 1));
 }
@@ -2720,7 +2620,7 @@ input[type=search]:focus,
   margin-bottom: 0 !important;
 }
 .expandable-panel__heading button {
-  background-color: var(--fkds-color-background-secondary, #f4f4f4);
+  background-color: var(--fkds-color-interactive-surface-background-primary-default, #f4f4f4);
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   border-radius: var(--f-border-radius-medium, 4px);
   color: var(--fkds-color-text-primary, #1b1e23);
@@ -2732,11 +2632,11 @@ input[type=search]:focus,
   text-align: left;
   width: 100%;
   font-size: var(--f-font-size-large, 1.125rem);
-  font-weight: var(--f-font-weight-bold, 900);
+  font-weight: var(--f-font-weight-bold, 700);
   line-height: var(--f-line-height-large, 1.5);
 }
 .expandable-panel__heading button:focus, .expandable-panel__heading button:hover {
-  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
+  background-color: var(--fkds-color-interactive-surface-background-primary-hover, #ddddde);
 }
 .expandable-panel__title {
   flex-grow: 1;
@@ -2959,6 +2859,174 @@ input[type=search]:focus,
   margin-bottom: 2rem;
 }
 
+.offline .icon-stack, .icon-stack,
+.icon--stack {
+  position: relative;
+}
+.icon-stack .icon,
+.icon--stack .icon {
+  position: absolute;
+}
+
+.icon-stack--new-window .icon.f-icon-new-window,
+.icon--stack--new-window .icon.f-icon-new-window {
+  width: 55%;
+  height: 55%;
+  top: 0;
+  right: 0;
+}
+.icon-stack--new-window .icon:not(.f-icon-new-window),
+.icon--stack--new-window .icon:not(.f-icon-new-window) {
+  width: 83%;
+  height: 83%;
+  bottom: 0;
+  left: 5%;
+}
+.icon-stack--tooltip .f-icon-circle,
+.icon--stack--tooltip .f-icon-circle {
+  fill: var(--fkds-color-action-background-primary-default, #4a52b6);
+  color: var(--fkds-color-action-border-primary-default, #4a52b6);
+}
+.icon-stack--tooltip .f-icon-i,
+.icon--stack--tooltip .f-icon-i {
+  color: var(--fkds-color-text-inverted, #fff);
+}
+.icon-stack--info .f-icon-circle,
+.icon--stack--info .f-icon-circle {
+  color: var(--fkds-color-feedback-background-info, #f5f6fa);
+  fill: var(--fkds-color-feedback-border-info, #4a52b6);
+}
+.icon-stack--info .f-icon-i,
+.icon--stack--info .f-icon-i {
+  color: var(--fkds-color-text-primary, #1b1e23);
+}
+.icon-stack--warning .f-icon-circle,
+.icon--stack--warning .f-icon-circle {
+  color: var(--fkds-color-feedback-background-warning, #fffcf3);
+  fill: var(--fkds-color-feedback-border-warning, #ffbe10);
+}
+.icon-stack--warning .f-icon-alert,
+.icon--stack--warning .f-icon-alert {
+  color: var(--fkds-color-text-primary, #1b1e23);
+}
+.icon-stack--error .f-icon-triangle,
+.icon--stack--error .f-icon-triangle {
+  color: var(--fkds-color-feedback-background-negative, #fcf3f3);
+  fill: var(--fkds-color-feedback-border-negative, #ca1515);
+}
+.icon-stack--error .f-icon-alert,
+.icon--stack--error .f-icon-alert {
+  color: var(--fkds-color-text-primary, #1b1e23);
+}
+.icon-stack--success .f-icon-circle,
+.icon--stack--success .f-icon-circle {
+  color: var(--fkds-color-feedback-background-positive, #f3f8f5);
+  fill: var(--fkds-color-feedback-border-positive, #35805b);
+}
+.icon-stack--success .f-icon-success,
+.icon--stack--success .f-icon-success {
+  color: var(--fkds-color-text-primary, #1b1e23);
+  transform: scale(0.6);
+}
+@media (forced-colors: active) {
+  .icon-stack--info .f-icon-circle,
+  .icon-stack--info .f-icon-triangle, .icon-stack--warning .f-icon-circle,
+  .icon-stack--warning .f-icon-triangle, .icon-stack--error .f-icon-circle,
+  .icon-stack--error .f-icon-triangle, .icon-stack--success .f-icon-circle,
+  .icon-stack--success .f-icon-triangle,
+  .icon--stack--info .f-icon-circle,
+  .icon--stack--info .f-icon-triangle,
+  .icon--stack--warning .f-icon-circle,
+  .icon--stack--warning .f-icon-triangle,
+  .icon--stack--error .f-icon-circle,
+  .icon--stack--error .f-icon-triangle,
+  .icon--stack--success .f-icon-circle,
+  .icon--stack--success .f-icon-triangle {
+    color: Canvas;
+    fill: CanvasText;
+  }
+  .icon-stack--info .f-icon-alert,
+  .icon-stack--info .f-icon-i,
+  .icon-stack--info .f-icon-success, .icon-stack--warning .f-icon-alert,
+  .icon-stack--warning .f-icon-i,
+  .icon-stack--warning .f-icon-success, .icon-stack--error .f-icon-alert,
+  .icon-stack--error .f-icon-i,
+  .icon-stack--error .f-icon-success, .icon-stack--success .f-icon-alert,
+  .icon-stack--success .f-icon-i,
+  .icon-stack--success .f-icon-success,
+  .icon--stack--info .f-icon-alert,
+  .icon--stack--info .f-icon-i,
+  .icon--stack--info .f-icon-success,
+  .icon--stack--warning .f-icon-alert,
+  .icon--stack--warning .f-icon-i,
+  .icon--stack--warning .f-icon-success,
+  .icon--stack--error .f-icon-alert,
+  .icon--stack--error .f-icon-i,
+  .icon--stack--error .f-icon-success,
+  .icon--stack--success .f-icon-alert,
+  .icon--stack--success .f-icon-i,
+  .icon--stack--success .f-icon-success {
+    color: CanvasText;
+  }
+  .icon-stack--tooltip .f-icon-circle,
+  .icon--stack--tooltip .f-icon-circle {
+    color: Canvas;
+    fill: ButtonBorder;
+  }
+  .icon-stack--tooltip .f-icon-i,
+  .icon--stack--tooltip .f-icon-i {
+    color: ButtonText;
+  }
+}
+.icon-stack--large,
+.icon--stack--large {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.icon-stack--large svg,
+.icon--stack--large svg {
+  width: 100%;
+  height: 100%;
+}
+.icon-stack--circle, .icon-stack--circle-bottom,
+.icon--stack--circle,
+.icon--stack--circle-bottom {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 100%;
+  overflow: hidden;
+}
+.icon-stack--circle .f-icon-circle, .icon-stack--circle-bottom .f-icon-circle,
+.icon--stack--circle .f-icon-circle,
+.icon--stack--circle-bottom .f-icon-circle {
+  color: var(--f-icon-color-success-background, #dbe9e2);
+  fill: var(--f-icon-color-success-background, #dbe9e2);
+  width: 100%;
+  height: 100%;
+}
+.icon-stack--circle .icon:not(.f-icon-circle), .icon-stack--circle-bottom .icon:not(.f-icon-circle),
+.icon--stack--circle .icon:not(.f-icon-circle),
+.icon--stack--circle-bottom .icon:not(.f-icon-circle) {
+  color: var(--f-icon-color-success, #35805b);
+  position: absolute;
+}
+.icon-stack--circle .icon:not(.f-icon-circle),
+.icon--stack--circle .icon:not(.f-icon-circle) {
+  width: 70%;
+  height: 70%;
+  inset: 0;
+  margin: auto;
+}
+.icon-stack--circle-bottom .icon:not(.f-icon-circle),
+.icon--stack--circle-bottom .icon:not(.f-icon-circle) {
+  width: 80%;
+  height: 80%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  bottom: 0%;
+}
+
 .indent {
   border-left: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-weak, #ddddde);
   margin-bottom: 1rem;
@@ -2970,7 +3038,7 @@ input[type=search]:focus,
   color: var(--fkds-color-text-primary, #1b1e23);
   display: inline-block;
   font-size: var(--f-font-size-standard, 1rem);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   line-height: var(--f-line-height-large, 1.5);
   margin-bottom: calc(0.25rem * var(--f-density-factor, 1));
   width: var(--f-width-full, 100%);
@@ -3976,7 +4044,7 @@ input[type=search]:focus,
 }
 .message-box__heading {
   font-size: var(--f-font-size-large, 1.125rem);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   color: var(--fkds-color-text-primary, #1b1e23);
   line-height: var(--f-line-height-medium, 1.4);
   align-items: flex-start;
@@ -4209,7 +4277,7 @@ input[type=search]:focus,
 }
 .modal__header .modal__title {
   font-size: var(--f-modal-title-font-size, 1.25rem);
-  font-weight: var(--f-font-weight-bold, 900);
+  font-weight: var(--f-font-weight-bold, 700);
   margin-bottom: 0;
   margin-top: 0;
   color: var(--fkds-color-text-primary, #1b1e23);
@@ -4332,9 +4400,21 @@ input[type=search]:focus,
 .imenu__list__item a:active {
   color: var(--fkds-color-text-primary, #1b1e23);
 }
+@media (forced-colors: active) {
+  .imenu__list__item a,
+  .imenu__list__item a:visited,
+  .imenu__list__item a:active {
+    color: LinkText;
+  }
+}
 .imenu__list__item a:hover {
   color: var(--fkds-color-text-primary, #1b1e23);
 }
+@media (forced-colors: active) {
+  .imenu__list__item a:hover {
+    color: LinkText;
+  }
+}
 .imenu__popup-item {
   position: relative;
   list-style-type: none;
@@ -4360,18 +4440,42 @@ input[type=search]:focus,
   font-weight: var(--f-font-weight-normal, 400);
   background-color: var(--fkds-color-navigation-background-hover, #dbe9e2);
 }
+@media (forced-colors: active) {
+  .imenu--vertical .imenu__list__item:hover {
+    outline: 2px solid highlight;
+  }
+}
 .imenu--vertical .imenu__list__item--highlight {
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   background-color: var(--fkds-color-navigation-background-selected, #35805b);
 }
+@media (forced-colors: active) {
+  .imenu--vertical .imenu__list__item--highlight {
+    background-color: highlight;
+    color: highlightText;
+    forced-color-adjust: none;
+  }
+}
 .imenu--vertical .imenu__list__item--highlight .imenu__list__anchor {
   color: var(--fkds-color-text-inverted, #fff);
 }
+@media (forced-colors: active) {
+  .imenu--vertical .imenu__list__item--highlight .imenu__list__anchor {
+    color: HighlightText;
+  }
+}
 .imenu--vertical .imenu__list__item--highlight:hover {
   background-color: var(--fkds-color-navigation-background-selected, #35805b);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   color: var(--fkds-color-text-inverted, #fff);
 }
+@media (forced-colors: active) {
+  .imenu--vertical .imenu__list__item--highlight:hover {
+    background-color: highlight;
+    color: highlightText;
+    forced-color-adjust: none;
+  }
+}
 
 .imenu--horizontal {
   overflow: hidden;
@@ -4386,13 +4490,18 @@ input[type=search]:focus,
   padding-right: 0.75rem;
 }
 .imenu--horizontal .imenu__list__item--highlight {
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
 }
 .imenu--horizontal .imenu__list__item--highlight .imenu__list__anchor-container {
   border-bottom: 5px solid var(--fkds-color-navigation-border-selected, #35805b);
 }
+@media (forced-colors: active) {
+  .imenu--horizontal .imenu__list__item--highlight .imenu__list__anchor-container {
+    border-bottom: 5px solid highlight;
+  }
+}
 .imenu--horizontal .imenu__list__item--highlight .imenu__list__anchor:hover {
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
 }
 .imenu--horizontal .imenu__list__item--hidden {
   visibility: hidden;
@@ -4400,10 +4509,20 @@ input[type=search]:focus,
 .imenu--horizontal .imenu__list__item:not(.imenu__list__item--highlight) .imenu__list__anchor-container:hover {
   border-bottom: 5px solid var(--fkds-color-navigation-border-hover, #88b49f);
 }
+@media (forced-colors: active) {
+  .imenu--horizontal .imenu__list__item:not(.imenu__list__item--highlight) .imenu__list__anchor-container:hover {
+    border-bottom: 5px solid highlight;
+  }
+}
 .imenu--horizontal .imenu__list__anchor-container {
   padding-bottom: 0.5rem;
   border-bottom: 5px solid transparent;
 }
+@media (forced-colors: active) {
+  .imenu--horizontal .imenu__list__anchor-container {
+    border-bottom: none;
+  }
+}
 .imenu--horizontal .imenu__list__anchor {
   display: inline-flex;
 }
@@ -4504,7 +4623,6 @@ input[type=search]:focus,
 }
 .page-header__logo::after {
   content: " ";
-  background-color: var(--fkds-color-header-text-primary, #fff);
   height: 1.38rem;
   padding: 0.5px;
   margin: 0 1rem 0.155rem;
@@ -4513,7 +4631,7 @@ input[type=search]:focus,
   padding-top: 0.22rem;
   margin: 0;
   font-size: var(--f-font-size-h3, 1.375rem);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   color: var(--fkds-color-header-text-primary, #fff);
   white-space: nowrap;
   overflow: hidden;
@@ -4546,7 +4664,7 @@ input[type=search]:focus,
   align-items: center;
 }
 .paginator__page, .paginator__previous, .paginator__next {
-  border: none;
+  border: 2px solid transparent;
   color: var(--fkds-color-text-primary, #1b1e23);
   height: 2.5rem;
   background-color: transparent;
@@ -4558,9 +4676,21 @@ input[type=search]:focus,
   color: var(--fkds-color-action-text-inverted-default, #fff);
   background-color: var(--fkds-color-action-background-primary-default, #4a52b6);
 }
+@media (forced-colors: active) {
+  .paginator__page--active, .paginator__previous--active, .paginator__next--active {
+    background-color: highlight;
+    color: highlightText;
+    forced-color-adjust: none;
+  }
+}
 .paginator__page:hover:enabled:not(.paginator__page--active, .paginator__previous--active, .paginator__next--active), .paginator__previous:hover:enabled:not(.paginator__page--active, .paginator__previous--active, .paginator__next--active), .paginator__next:hover:enabled:not(.paginator__page--active, .paginator__previous--active, .paginator__next--active) {
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
+@media (forced-colors: active) {
+  .paginator__page:hover:enabled:not(.paginator__page--active, .paginator__previous--active, .paginator__next--active), .paginator__previous:hover:enabled:not(.paginator__page--active, .paginator__previous--active, .paginator__next--active), .paginator__next:hover:enabled:not(.paginator__page--active, .paginator__previous--active, .paginator__next--active) {
+    border: 2px solid highlight;
+  }
+}
 .paginator__next, .paginator__previous {
   display: flex;
   align-items: center;
@@ -4695,6 +4825,7 @@ input[type=search]:focus,
   }
 }
 .radio-button.disabled .radio-button__label {
+  color: var(--fkds-color-text-disabled, #8d8e91);
   cursor: default;
 }
 .radio-button.disabled .radio-button__label::before, .radio-button.disabled .radio-button__label::after {
@@ -4877,7 +5008,7 @@ input[type=search]:focus,
   border-bottom: 0;
   color: var(--fkds-color-text-primary, #1b1e23);
   font-size: var(--f-font-size-large, 1.125rem);
-  font-weight: var(--f-font-weight-bold, 900);
+  font-weight: var(--f-font-weight-bold, 700);
   line-height: var(--f-line-height-large, 1.5);
   margin: 0;
   padding: calc(1rem * var(--f-density-factor, 1)) 1rem;
@@ -4960,7 +5091,7 @@ input[type=search]:focus,
   background: transparent;
   color: var(--fkds-color-text-primary, #1b1e23);
   font-size: var(--f-font-size-standard, 1rem);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   line-height: var(--f-line-height-large, 1.5);
   margin-bottom: calc(0.25rem * var(--f-density-factor, 1));
   width: var(--f-width-full, 100%);
@@ -4971,7 +5102,7 @@ input[type=search]:focus,
   border-bottom: 2px solid var(--fkds-color-border-primary, #8d8e91);
   border-right: 1px solid var(--fkds-color-border-primary, #8d8e91);
   color: var(--fkds-color-text-primary, #1b1e23);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   line-height: var(--f-line-height-large, 1.5);
   padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
   text-align: left;
@@ -5006,7 +5137,7 @@ input[type=search]:focus,
 }
 .table tbody th {
   border-right: 1px solid var(--fkds-color-border-primary, #8d8e91);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   line-height: calc(1.5rem * var(--f-density-factor, 1));
 }
 .table tbody .table__column--action {
@@ -5154,7 +5285,7 @@ input[type=search]:focus,
   color: var(--fkds-color-text-disabled, #8d8e91);
 }
 .table__button {
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   outline-offset: 0.25rem;
   font-size: 14px;
   line-height: 1.25rem;
@@ -5173,7 +5304,7 @@ input[type=search]:focus,
 }
 
 .table-ng {
-  border-collapse: separate;
+  border-collapse: collapse;
   border-spacing: 0;
   font-size: var(--f-font-size-standard, 1rem);
   margin: 0 0 calc(var(--f-margin-component-bottom, 1.5rem) * var(--f-density-factor, 1));
@@ -5183,7 +5314,7 @@ input[type=search]:focus,
   background: transparent;
   color: var(--fkds-color-text-primary, #1b1e23);
   font-size: var(--f-font-size-standard, 1rem);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   line-height: var(--f-line-height-large, 1.5);
   margin-bottom: calc(0.25rem * var(--f-density-factor, 1));
   width: var(--f-width-full, 100%);
@@ -5194,7 +5325,7 @@ input[type=search]:focus,
   border-bottom: 2px solid var(--fkds-color-border-primary, #8d8e91);
   border-right: 1px solid var(--fkds-color-border-primary, #8d8e91);
   color: var(--fkds-color-text-primary, #1b1e23);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   line-height: var(--f-line-height-large, 1.5);
   padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
   text-align: left;
@@ -5221,15 +5352,23 @@ input[type=search]:focus,
   background: var(--fkds-color-background-secondary, #f4f4f4);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
+.table-ng--divided tbody > tr > td,
+.table-ng--divided tbody > tr > th {
+  border-bottom: 1px solid var(--fkds-color-border-primary, #8d8e91);
+}
 
 .table-ng__cell {
   padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
   text-wrap: nowrap;
-  border: 2px solid transparent;
+  border: 1px solid transparent;
 }
 .table-ng__cell:focus, .table-ng__cell:focus-within {
   box-shadow: none;
-  border: 2px solid var(--f-color-focus, #1b1e23);
+  outline: 3px solid var(--fkds-color-text-primary, #1b1e23);
+  outline-offset: -3px;
+}
+.table-ng__cell:not(.table-ng__cell--menu-open):hover:has(button) {
+  background: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
 .table-ng__cell input:focus,
 .table-ng__cell button:focus,
@@ -5251,29 +5390,65 @@ input[type=search]:focus,
 .table-ng__cell--align-right input {
   text-align: right;
 }
-.table-ng__cell--select .table-ng__editable__icon--active {
-  rotate: 180deg;
-}
 .table-ng__cell--select, .table-ng__cell--text {
-  padding: 0 0.25rem;
+  padding: 0;
 }
-.table-ng__cell--select:focus-visible .table-ng__editable__icon, .table-ng__cell--text:focus-visible .table-ng__editable__icon {
-  visibility: visible;
+.table-ng__cell--select:hover, .table-ng__cell--text:hover {
+  background: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
+}
+.table-ng__cell--select:focus .table-ng__editable, .table-ng__cell--select:focus-within .table-ng__editable, .table-ng__cell--text:focus .table-ng__editable, .table-ng__cell--text:focus-within .table-ng__editable {
+  box-shadow: inset 0 -3px 0 0 var(--fkds-color-border-strong, #5f6165);
+  border-radius: 0;
+}
+.table-ng__cell .table-ng__editable:focus-within {
+  box-shadow: inset 0 -3px 0 0 var(--fkds-color-border-strong, #5f6165);
+  border-radius: 0;
+}
+.table-ng__cell .table-ng__editable:hover {
+  box-shadow: inset 0 -3px 0 0 var(--fkds-color-border-strong, #5f6165);
+  border-radius: 0;
+}
+.table-ng__cell--select .table-ng__editable {
+  border: 3px solid transparent;
+  box-sizing: border-box;
 }
 .table-ng__cell--text:focus-visible {
-  outline: none !important;
   box-shadow: none !important;
 }
+.table-ng__cell--text.table-ng__cell--error:not(:focus-within) .table-ng__editable {
+  box-shadow: inset 0 -3px 0 0 var(--fkds-color-feedback-text-negative, #ca1515);
+  border-radius: 0;
+}
+.table-ng__cell--text.table-ng__cell--error:hover:not(:focus-within) .table-ng__editable {
+  box-shadow: inset 0 -3px 0 0 var(--fkds-color-feedback-text-negative, #ca1515);
+  border-radius: 0;
+}
+.table-ng__cell--text.table-ng__cell--error:focus .table-ng__editable {
+  box-shadow: inset 0 -3px 0 0 var(--fkds-color-feedback-text-negative, #ca1515);
+  border-radius: 0;
+}
 .table-ng__cell--text .table-ng__editable {
-  border-width: 2px;
-  border-style: solid;
-  border-color: transparent;
+  border: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+}
+.table-ng__cell--text .table-ng__editable:focus-within {
+  box-shadow: inset 0 -3px 0 0 var(--fkds-color-border-strong, #5f6165);
+  border-radius: 0;
 }
 .table-ng__cell--text .table-ng__editable:focus-within .table-ng__editable__text {
-  display: none;
+  visibility: hidden;
 }
 .table-ng__cell--text .table-ng__editable:focus-within .table-ng__textedit {
-  flex: 1 0 auto;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  min-width: 0;
+  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
+}
+.table-ng__cell--text .table-ng__editable:hover {
+  box-shadow: inset 0 -3px 0 0 var(--fkds-color-border-strong, #5f6165);
+  border-radius: 0;
 }
 .table-ng__cell--checkbox, .table-ng__cell--radio {
   text-align: center;
@@ -5283,6 +5458,11 @@ input[type=search]:focus,
   height: var(--f-icon-size-medium, 1.25rem);
   width: var(--f-icon-size-medium, 1.25rem);
   vertical-align: middle;
+  accent-color: var(--fkds-color-action-background-primary-default, #4a52b6);
+}
+.table-ng__cell--checkbox:hover, .table-ng__cell--radio:hover {
+  background: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
+  accent-color: var(--fkds-color-action-background-primary-hover, #3b4292);
 }
 .table-ng__cell--expand button, .table-ng__cell--button button {
   padding: 0;
@@ -5291,8 +5471,12 @@ input[type=search]:focus,
   min-width: var(--f-icon-size-medium, 1.25rem);
   width: 100%;
   background: inherit;
+  color: var(--fkds-color-action-background-primary-default, #4a52b6);
   cursor: pointer;
 }
+.table-ng__cell--expand button:hover, .table-ng__cell--button button:hover {
+  color: var(--fkds-color-action-background-primary-hover, #3b4292);
+}
 .table-ng__cell--expand button svg, .table-ng__cell--button button svg {
   vertical-align: middle;
 }
@@ -5303,17 +5487,30 @@ input[type=search]:focus,
 .table-ng__cell--selectable {
   width: var(--f-icon-size-medium, 1.25rem);
 }
+.table-ng__cell--selectable:hover {
+  background: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
+}
 .table-ng__cell--rowheader {
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   text-align: left;
 }
 .table-ng__cell--custom {
   padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
-  border: 2px solid transparent;
+  border: 1px solid transparent;
 }
 .table-ng__cell--custom:focus {
   box-shadow: none;
-  border: 2px solid var(--f-color-focus, #1b1e23);
+  outline: 3px solid var(--fkds-color-text-primary, #1b1e23);
+  outline-offset: -3px;
+}
+.table-ng__cell--menu-open, .table-ng__cell--menu-open:hover {
+  background: var(--fkds-color-action-background-primary-active, #3b4292);
+}
+.table-ng__cell--menu-open .icon-button, .table-ng__cell--menu-open:hover .icon-button {
+  color: var(--fkds-color-text-inverted, #fff);
+}
+.table-ng__cell--menu-open .table-ng__editable:hover, .table-ng__cell--menu-open:hover .table-ng__editable:hover {
+  background: transparent;
 }
 
 .table-ng__textedit {
@@ -5325,16 +5522,13 @@ input[type=search]:focus,
 }
 .table-ng__textedit:focus {
   box-shadow: none !important;
-  outline: none !important;
 }
 
 .table-ng__editable {
   padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
   display: flex;
   align-items: center;
-}
-.table-ng__editable:hover:not(:focus-within) .table-ng__editable__icon {
-  visibility: visible;
+  margin-block: 2px;
 }
 .table-ng__editable__text {
   flex: 1 1 auto;
@@ -5343,21 +5537,30 @@ input[type=search]:focus,
 .table-ng__editable__numeric input {
   font-feature-settings: "tnum" 1;
 }
-.table-ng__editable__icon {
-  visibility: hidden;
-  margin-left: 1rem;
-  flex: none;
-  color: var(--fkds-color-action-text-primary-default, #4a52b6);
-}
-
-.table-ng__cell--select:hover .table-ng__editable, .table-ng__cell--text:hover .table-ng__editable {
-  background: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
-}
 
-.table-ng__cell--text.table-ng__cell--error:not(:focus-within) .table-ng__editable, .table-ng__cell--text.table-ng__cell--error:hover:not(:focus-within) .table-ng__editable, .table-ng__cell--text.table-ng__cell--error:focus .table-ng__editable {
-  border-bottom-color: var(--fkds-color-feedback-text-negative, #ca1515);
+@media (forced-colors: active) {
+  .table-ng__editable {
+    forced-color-adjust: none;
+    color: CanvasText;
+  }
+  .table-ng__cell--text:hover .table-ng__editable,
+  .table-ng__cell--select:hover .table-ng__editable,
+  .table-ng__cell--text:focus-within .table-ng__editable,
+  .table-ng__cell--select:focus-within .table-ng__editable {
+    box-shadow: inset 0 -3px 0 0 Highlight;
+    border-radius: 0;
+  }
+  .table-ng [tabindex="0"]:focus,
+  .table-ng [tabindex="0"]:focus-visible {
+    outline: 3px solid CanvasText;
+    outline-offset: -3px;
+    background: transparent;
+  }
+  .table-ng__cell :is(button, a, input, select, [role=combobox]):focus,
+  .table-ng__cell :is(button, a, input, select, [role=combobox]):focus-visible {
+    outline: none;
+  }
 }
-
 .table-ng__column {
   padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
   border-bottom: 2px solid transparent;
@@ -5376,6 +5579,7 @@ input[type=search]:focus,
   height: var(--f-icon-size-medium, 1.25rem);
   width: var(--f-icon-size-medium, 1.25rem);
   vertical-align: middle;
+  accent-color: var(--fkds-color-action-background-primary-default, #4a52b6);
 }
 .table-ng__column--rowheader {
   text-align: left;
@@ -5426,6 +5630,11 @@ input[type=search]:focus,
   color: var(--fkds-color-feedback-text-negative, #ca1515);
   height: 16px;
 }
+@media (forced-colors: active) {
+  .text-field__error-popup-icon {
+    color: CanvasText;
+  }
+}
 .text-field__input-wrapper {
   display: flex;
   gap: calc(0.5rem * var(--f-density-factor, 1));
@@ -5626,7 +5835,7 @@ input[type=search]:focus,
 }
 .tooltip__header {
   font-size: var(--f-font-size-large, 1.125rem);
-  font-weight: var(--f-font-weight-bold, 900);
+  font-weight: var(--f-font-weight-bold, 700);
   line-height: var(--f-line-height-medium, 1.4);
   padding: 0 1rem;
   margin-bottom: 0.5rem;
@@ -6128,12 +6337,27 @@ input[type=search]:focus,
   min-height: var(--f-icon-size-medium, 1.25rem);
   min-width: var(--f-icon-size-medium, 1.25rem);
 }
+@media (forced-colors: active) {
+  .popup-error--arrow .popup-error__icon {
+    color: CanvasText;
+  }
+}
 .popup-error--arrow .popup-error__button {
-  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   min-height: 24px;
   min-width: 24px;
   padding: 0;
-  padding-left: 5px;
+  border: 1px solid transparent;
+  background-color: transparent;
+}
+@media (forced-colors: active) {
+  .popup-error--arrow {
+    background: CanvasText;
+    --fkds-color-feedback-border-negative: CanvasText;
+    --fkds-color-feedback-background-negative: Canvas;
+  }
 }
 .popup-error--arrow::before {
   content: "";
@@ -6207,9 +6431,21 @@ input[type=search]:focus,
 .ipopupmenu__list__item a:active {
   color: var(--fkds-color-text-primary, #1b1e23);
 }
+@media (forced-colors: active) {
+  .ipopupmenu__list__item a,
+  .ipopupmenu__list__item a:visited,
+  .ipopupmenu__list__item a:active {
+    color: LinkText;
+  }
+}
 .ipopupmenu__list__item a:hover {
   color: var(--fkds-color-text-primary, #1b1e23);
 }
+@media (forced-colors: active) {
+  .ipopupmenu__list__item a:hover {
+    color: LinkText;
+  }
+}
 
 .ipopupmenu--vertical .ipopupmenu__list {
   display: block;
@@ -6221,13 +6457,30 @@ input[type=search]:focus,
 .ipopupmenu--vertical .ipopupmenu__list__item:hover:not(.ipopupmenu__list__item--highlight) {
   background-color: var(--fkds-color-navigation-background-hover, #dbe9e2);
 }
+@media (forced-colors: active) {
+  .ipopupmenu--vertical .ipopupmenu__list__item:hover:not(.ipopupmenu__list__item--highlight) {
+    outline: 2px solid highlight;
+  }
+}
 .ipopupmenu--vertical .ipopupmenu__list__item--highlight {
   background-color: var(--fkds-color-navigation-background-selected, #35805b);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
+}
+@media (forced-colors: active) {
+  .ipopupmenu--vertical .ipopupmenu__list__item--highlight {
+    background-color: highlight;
+    color: highlightText;
+    forced-color-adjust: none;
+  }
 }
 .ipopupmenu--vertical .ipopupmenu__list__item--highlight a {
   color: var(--fkds-color-text-inverted, #fff);
 }
+@media (forced-colors: active) {
+  .ipopupmenu--vertical .ipopupmenu__list__item--highlight a {
+    color: HighlightText;
+  }
+}
 
 .popup--overlay {
   position: absolute;
@@ -6262,7 +6515,7 @@ input[type=search]:focus,
   left: 20px;
   top: 20px;
   font-size: var(--f-font-size-standard, 1rem);
-  font-weight: var(--f-font-weight-medium, 700);
+  font-weight: var(--f-font-weight-medium, 600);
   text-decoration: underline;
   text-underline-offset: 0.25em;
   padding: 0.25rem 0.5rem;