@fkui/design 6.38.0 → 6.40.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);
@@ -1327,10 +1327,20 @@ input[type=search]:focus,
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
 }
-.button.disabled, .disabled.calendar-navbar__year-selector-button, .button.disabled:hover, .button:disabled, .calendar-navbar__year-selector-button:disabled, .button:disabled:hover, .button.button--disabled, .button--disabled.calendar-navbar__year-selector-button, .button.button--disabled:hover {
+.button.disabled, .disabled.calendar-navbar__year-selector-button, .button.disabled:hover, .button:disabled, .calendar-navbar__year-selector-button:disabled, .button:disabled:hover, .button[aria-disabled=true], [aria-disabled=true].calendar-navbar__year-selector-button, .button[aria-disabled=true]:hover, .button.button--disabled, .button--disabled.calendar-navbar__year-selector-button, .button.button--disabled:hover {
   background-color: var(--fkds-color-background-disabled, #f4f4f4);
   border-color: var(--fkds-color-border-disabled, #8d8e91);
   color: var(--fkds-color-text-disabled, #8d8e91);
+  pointer-events: none;
+}
+.button[aria-disabled=true], [aria-disabled=true].calendar-navbar__year-selector-button {
+  pointer-events: none;
+}
+@media (forced-colors: active) {
+  .button[aria-disabled=true], [aria-disabled=true].calendar-navbar__year-selector-button {
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 .button.button--primary, .button--primary.calendar-navbar__year-selector-button {
   background-color: var(--fkds-color-action-background-primary-default, #4a52b6);
@@ -1354,10 +1364,20 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-action-text-inverted-default, #fff);
 }
-.button.button--primary.disabled, .button--primary.disabled.calendar-navbar__year-selector-button, .button.button--primary.disabled:hover, .button.button--primary:disabled, .button--primary.calendar-navbar__year-selector-button:disabled, .button.button--primary:disabled:hover, .button.button--primary.button--disabled, .button--primary.button--disabled.calendar-navbar__year-selector-button, .button.button--primary.button--disabled:hover {
+.button.button--primary.disabled, .button--primary.disabled.calendar-navbar__year-selector-button, .button.button--primary.disabled:hover, .button.button--primary:disabled, .button--primary.calendar-navbar__year-selector-button:disabled, .button.button--primary:disabled:hover, .button.button--primary[aria-disabled=true], .button--primary[aria-disabled=true].calendar-navbar__year-selector-button, .button.button--primary[aria-disabled=true]:hover, .button.button--primary.button--disabled, .button--primary.button--disabled.calendar-navbar__year-selector-button, .button.button--primary.button--disabled:hover {
   background-color: var(--fkds-color-background-disabled, #f4f4f4);
   border-color: var(--fkds-color-border-disabled, #8d8e91);
   color: var(--fkds-color-text-disabled, #8d8e91);
+  pointer-events: none;
+}
+.button.button--primary[aria-disabled=true], .button--primary[aria-disabled=true].calendar-navbar__year-selector-button {
+  pointer-events: none;
+}
+@media (forced-colors: active) {
+  .button.button--primary[aria-disabled=true], .button--primary[aria-disabled=true].calendar-navbar__year-selector-button {
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 .button.button--secondary, .button--secondary.calendar-navbar__year-selector-button {
   background-color: var(--fkds-color-action-background-secondary-default, #f5f6fa);
@@ -1381,17 +1401,28 @@ input[type=search]:focus,
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
 }
-.button.button--secondary.disabled, .button--secondary.disabled.calendar-navbar__year-selector-button, .button.button--secondary.disabled:hover, .button.button--secondary:disabled, .button--secondary.calendar-navbar__year-selector-button:disabled, .button.button--secondary:disabled:hover, .button.button--secondary.button--disabled, .button--secondary.button--disabled.calendar-navbar__year-selector-button, .button.button--secondary.button--disabled:hover {
+.button.button--secondary.disabled, .button--secondary.disabled.calendar-navbar__year-selector-button, .button.button--secondary.disabled:hover, .button.button--secondary:disabled, .button--secondary.calendar-navbar__year-selector-button:disabled, .button.button--secondary:disabled:hover, .button.button--secondary[aria-disabled=true], .button--secondary[aria-disabled=true].calendar-navbar__year-selector-button, .button.button--secondary[aria-disabled=true]:hover, .button.button--secondary.button--disabled, .button--secondary.button--disabled.calendar-navbar__year-selector-button, .button.button--secondary.button--disabled:hover {
   background-color: var(--fkds-color-background-disabled, #f4f4f4);
   border-color: var(--fkds-color-border-disabled, #8d8e91);
   color: var(--fkds-color-text-disabled, #8d8e91);
+  pointer-events: none;
+}
+.button.button--secondary[aria-disabled=true], .button--secondary[aria-disabled=true].calendar-navbar__year-selector-button {
+  pointer-events: none;
+}
+@media (forced-colors: active) {
+  .button.button--secondary[aria-disabled=true], .button--secondary[aria-disabled=true].calendar-navbar__year-selector-button {
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 .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;
@@ -1413,10 +1444,20 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-action-text-primary-hover, #3b4292);
 }
-.button.button--discrete.disabled, .button--discrete.disabled.calendar-navbar__year-selector-button, .button.disabled.button--text, .disabled.button--text.calendar-navbar__year-selector-button, .button.button--discrete.disabled:hover, .button.button--discrete:disabled, .button--discrete.calendar-navbar__year-selector-button:disabled, .button.button--text:disabled, .button--text.calendar-navbar__year-selector-button:disabled, .button.button--discrete:disabled:hover, .button.button--discrete.button--disabled, .button--discrete.button--disabled.calendar-navbar__year-selector-button, .button.button--disabled.button--text, .button--disabled.button--text.calendar-navbar__year-selector-button, .button.button--discrete.button--disabled:hover {
+.button.button--discrete.disabled, .button--discrete.disabled.calendar-navbar__year-selector-button, .button.disabled.button--text, .disabled.button--text.calendar-navbar__year-selector-button, .button.button--discrete.disabled:hover, .button.button--discrete:disabled, .button--discrete.calendar-navbar__year-selector-button:disabled, .button.button--text:disabled, .button--text.calendar-navbar__year-selector-button:disabled, .button.button--discrete:disabled:hover, .button.button--discrete[aria-disabled=true], .button--discrete[aria-disabled=true].calendar-navbar__year-selector-button, .button[aria-disabled=true].button--text, [aria-disabled=true].button--text.calendar-navbar__year-selector-button, .button.button--discrete[aria-disabled=true]:hover, .button.button--discrete.button--disabled, .button--discrete.button--disabled.calendar-navbar__year-selector-button, .button.button--disabled.button--text, .button--disabled.button--text.calendar-navbar__year-selector-button, .button.button--discrete.button--disabled:hover {
   background-color: transparent;
   border-color: transparent;
   color: var(--fkds-color-text-disabled, #8d8e91);
+  pointer-events: none;
+}
+.button.button--discrete[aria-disabled=true], .button--discrete[aria-disabled=true].calendar-navbar__year-selector-button, .button[aria-disabled=true].button--text, [aria-disabled=true].button--text.calendar-navbar__year-selector-button {
+  pointer-events: none;
+}
+@media (forced-colors: active) {
+  .button.button--discrete[aria-disabled=true], .button--discrete[aria-disabled=true].calendar-navbar__year-selector-button, .button[aria-disabled=true].button--text, [aria-disabled=true].button--text.calendar-navbar__year-selector-button {
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 @media (max-width: 639.98px) {
   .button.button--discrete, .button--discrete.calendar-navbar__year-selector-button, .button.button--text, .button--text.calendar-navbar__year-selector-button {
@@ -1439,10 +1480,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));
@@ -1472,10 +1516,20 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-action-text-inverted-hover, #fff);
 }
-.button.button--discrete-inverted.disabled, .button--discrete-inverted.disabled.calendar-navbar__year-selector-button, .button.button--discrete-inverted.disabled:hover, .button.button--discrete-inverted:disabled, .button--discrete-inverted.calendar-navbar__year-selector-button:disabled, .button.button--discrete-inverted:disabled:hover, .button.button--discrete-inverted.button--disabled, .button--discrete-inverted.button--disabled.calendar-navbar__year-selector-button, .button.button--discrete-inverted.button--disabled:hover {
+.button.button--discrete-inverted.disabled, .button--discrete-inverted.disabled.calendar-navbar__year-selector-button, .button.button--discrete-inverted.disabled:hover, .button.button--discrete-inverted:disabled, .button--discrete-inverted.calendar-navbar__year-selector-button:disabled, .button.button--discrete-inverted:disabled:hover, .button.button--discrete-inverted[aria-disabled=true], .button--discrete-inverted[aria-disabled=true].calendar-navbar__year-selector-button, .button.button--discrete-inverted[aria-disabled=true]:hover, .button.button--discrete-inverted.button--disabled, .button--discrete-inverted.button--disabled.calendar-navbar__year-selector-button, .button.button--discrete-inverted.button--disabled:hover {
   background-color: transparent;
   border-color: transparent;
   color: var(--fkds-color-text-disabled, #8d8e91);
+  pointer-events: none;
+}
+.button.button--discrete-inverted[aria-disabled=true], .button--discrete-inverted[aria-disabled=true].calendar-navbar__year-selector-button {
+  pointer-events: none;
+}
+@media (forced-colors: active) {
+  .button.button--discrete-inverted[aria-disabled=true], .button--discrete-inverted[aria-disabled=true].calendar-navbar__year-selector-button {
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 @media (max-width: 639.98px) {
   .button.button--discrete-inverted, .button--discrete-inverted.calendar-navbar__year-selector-button {
@@ -1488,7 +1542,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;
@@ -1511,10 +1565,20 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
 }
-.button.button--tertiary.disabled, .disabled.calendar-navbar__year-selector-button, .button.button--tertiary.disabled:hover, .button.button--tertiary:disabled, .calendar-navbar__year-selector-button:disabled, .button.button--tertiary:disabled:hover, .button.button--tertiary.button--disabled, .button--disabled.calendar-navbar__year-selector-button, .button.button--tertiary.button--disabled:hover {
+.button.button--tertiary.disabled, .disabled.calendar-navbar__year-selector-button, .button.button--tertiary.disabled:hover, .button.button--tertiary:disabled, .calendar-navbar__year-selector-button:disabled, .button.button--tertiary:disabled:hover, .button.button--tertiary[aria-disabled=true], [aria-disabled=true].calendar-navbar__year-selector-button, .button.button--tertiary[aria-disabled=true]:hover, .button.button--tertiary.button--disabled, .button--disabled.calendar-navbar__year-selector-button, .button.button--tertiary.button--disabled:hover {
   background-color: transparent;
   border-color: transparent;
   color: var(--fkds-color-text-disabled, #8d8e91);
+  pointer-events: none;
+}
+.button.button--tertiary[aria-disabled=true], [aria-disabled=true].calendar-navbar__year-selector-button {
+  pointer-events: none;
+}
+@media (forced-colors: active) {
+  .button.button--tertiary[aria-disabled=true], [aria-disabled=true].calendar-navbar__year-selector-button {
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 @media (max-width: 639.98px) {
   .button.button--tertiary, .calendar-navbar__year-selector-button {
@@ -1527,7 +1591,7 @@ input[type=search]:focus,
 .button.button--tertiary--black:hover, .calendar-navbar__year-selector-button:hover, .button.button--tertiary--black:active, .calendar-navbar__year-selector-button:active, .button.button--tertiary--black:focus, .calendar-navbar__year-selector-button:focus {
   color: var(--fkds-color-action-text-secondary-default, #1b1e23);
 }
-.button.button--tertiary:disabled, .calendar-navbar__year-selector-button:disabled {
+.button.button--tertiary:disabled, .calendar-navbar__year-selector-button:disabled, .button.button--tertiary[aria-disabled=true], [aria-disabled=true].calendar-navbar__year-selector-button {
   border: none;
 }
 .button.button--tertiary--inverted, .button--tertiary--inverted.calendar-navbar__year-selector-button {
@@ -1537,7 +1601,7 @@ input[type=search]:focus,
   color: var(--fkds-color-action-text-inverted-focus, #fff);
   background-color: transparent;
 }
-.button.button--tertiary--inverted:disabled, .button--tertiary--inverted.calendar-navbar__year-selector-button:disabled {
+.button.button--tertiary--inverted:disabled, .button--tertiary--inverted.calendar-navbar__year-selector-button:disabled, .button.button--tertiary--inverted[aria-disabled=true], .button--tertiary--inverted[aria-disabled=true].calendar-navbar__year-selector-button {
   color: var(--fkds-color-text-disabled, #8d8e91);
   border: none;
   border-width: 0;
@@ -1548,7 +1612,7 @@ input[type=search]:focus,
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
 }
-.button.button--tertiary--underline:disabled, .button--tertiary--underline.calendar-navbar__year-selector-button:disabled {
+.button.button--tertiary--underline:disabled, .button--tertiary--underline.calendar-navbar__year-selector-button:disabled, .button.button--tertiary--underline[aria-disabled=true], .button--tertiary--underline[aria-disabled=true].calendar-navbar__year-selector-button {
   text-decoration: none;
 }
 .button.button--tertiary.button--small, .button--small.calendar-navbar__year-selector-button {
@@ -1640,7 +1704,7 @@ input[type=search]:focus,
   position: absolute;
   right: 1.25rem;
 }
-.button.disabled, .disabled.calendar-navbar__year-selector-button, .button.disabled:hover, .button:disabled, .calendar-navbar__year-selector-button:disabled, .button:disabled:hover, .button.button--disabled, .button--disabled.calendar-navbar__year-selector-button {
+.button.disabled, .disabled.calendar-navbar__year-selector-button, .button.disabled:hover, .button:disabled, .calendar-navbar__year-selector-button:disabled, .button:disabled:hover, .button[aria-disabled=true], [aria-disabled=true].calendar-navbar__year-selector-button, .button[aria-disabled=true]:hover, .button.button--disabled, .button--disabled.calendar-navbar__year-selector-button {
   border-width: var(--f-border-width-medium, 2px);
   box-shadow: none;
   cursor: default;
@@ -1703,7 +1767,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 +1888,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;
@@ -2088,7 +2152,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);
@@ -2171,7 +2235,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);
@@ -2280,7 +2344,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 {
@@ -2319,6 +2383,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,
@@ -2398,6 +2463,7 @@ input[type=search]:focus,
 .datepicker-field__close > .datepicker-field__close__button {
   margin: 0;
   padding: 1rem;
+  align-items: center;
 }
 
 .popup--overlay .datepicker-field__popup {
@@ -2420,6 +2486,24 @@ input[type=search]:focus,
   border: unset;
 }
 
+.definition-list {
+  margin: 0;
+  color: var(--fkds-color-text-primary, #1b1e23);
+}
+.definition-list__term {
+  float: left;
+  clear: left;
+  margin-right: 0.25rem;
+  font-weight: var(--f-font-weight-medium, 600);
+}
+.definition-list__term::after {
+  content: ":";
+}
+.definition-list__definition {
+  margin-left: 0;
+  margin-bottom: 0.25rem;
+}
+
 .dialogue-tree {
   margin: 0 0 var(--f-margin-component-bottom, 1.5rem);
 }
@@ -2452,16 +2536,16 @@ input[type=search]:focus,
   display: flex;
   align-items: center;
   justify-content: space-between;
+  cursor: pointer;
 }
 .dialogue-tree__list-item button span {
   display: -webkit-box;
   -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;
 }
 .dialogue-tree__list-item button .icon {
   flex-shrink: 0;
@@ -2475,7 +2559,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;
@@ -2615,7 +2699,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);
@@ -2627,11 +2711,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;
@@ -2811,7 +2895,8 @@ input[type=search]:focus,
 .file-item__file-name {
   margin-left: 0.25rem;
   min-width: 0;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
+  hyphens: auto;
   white-space: normal;
 }
 .file-item__separator {
@@ -2834,14 +2919,24 @@ input[type=search]:focus,
   box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
 }
-.file-selector label {
+@media (forced-colors: active) {
+  .file-selector label.button.button--tertiary {
+    border-color: ButtonBorder;
+    color: ButtonText;
+  }
+}
+.file-selector label.button.button--tertiary {
   cursor: pointer;
 }
-.file-selector input:disabled + label {
-  background-color: transparent;
-  border-color: transparent;
+.file-selector input[aria-disabled=true] + label.button.button--tertiary {
   cursor: default;
 }
+@media (forced-colors: active) {
+  .file-selector input[aria-disabled=true] + label.button.button--tertiary {
+    color: GrayText;
+    border-color: GrayText;
+  }
+}
 
 .file-uploader__message-box {
   margin-top: 1.25rem;
@@ -3033,7 +3128,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%);
@@ -4039,7 +4134,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;
@@ -4272,7 +4367,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);
@@ -4395,9 +4490,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;
@@ -4423,18 +4530,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;
@@ -4449,13 +4580,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;
@@ -4463,10 +4599,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;
 }
@@ -4575,7 +4721,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;
@@ -4618,7 +4764,7 @@ input[type=search]:focus,
 }
 .paginator__page--active, .paginator__previous--active, .paginator__next--active {
   color: var(--fkds-color-action-text-inverted-default, #fff);
-  background-color: var(--fkds-color-action-background-primary-default, #4a52b6);
+  background-color: var(--fkds-color-select-background-primary-default, #4a52b6);
 }
 @media (forced-colors: active) {
   .paginator__page--active, .paginator__previous--active, .paginator__next--active {
@@ -4896,51 +5042,11 @@ input[type=search]:focus,
 .sort-filter-dataset__sort {
   min-width: 80px;
 }
-.sort-filter-dataset__search {
-  position: relative;
-}
-.sort-filter-dataset__search input {
-  padding-left: 2.1rem;
-  padding-right: 2.1rem;
-}
 @media (min-width: 640px) {
   .sort-filter-dataset__search input {
     width: 160px;
   }
 }
-.sort-filter-dataset__search__magnify-icon {
-  position: absolute;
-  left: 1.75rem;
-  height: var(--f-height-large, 2.5rem);
-  /* same as textfield */
-  z-index: 1;
-  /* In front of input field */
-  width: 1.2rem;
-  color: var(--fkds-color-text-secondary, #5f6165);
-}
-@media (max-width: 639.98px) {
-  .sort-filter-dataset__search__magnify-icon {
-    top: 1.5rem;
-    left: 0.75rem;
-  }
-}
-.sort-filter-dataset__search__close-icon.button--discrete {
-  position: absolute;
-  top: -0.75rem;
-  right: 0;
-  color: var(--fkds-color-text-secondary, #5f6165);
-  cursor: pointer;
-  padding: 1rem;
-}
-@media (max-width: 639.98px) {
-  .sort-filter-dataset__search__close-icon.button--discrete {
-    top: 1rem;
-  }
-}
-.sort-filter-dataset__search__close-icon.button--discrete:hover {
-  box-shadow: none;
-  background-color: transparent;
-}
 
 .static-panel {
   margin-bottom: 2.5rem;
@@ -4952,7 +5058,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;
@@ -5035,7 +5141,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%);
@@ -5046,7 +5152,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;
@@ -5081,7 +5187,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 {
@@ -5223,13 +5329,23 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
 }
-.table__button.disabled, .table__button.disabled:hover, .table__button:disabled, .table__button:disabled:hover, .table__button.table__button--disabled, .table__button.table__button--disabled:hover {
+.table__button.disabled, .table__button.disabled:hover, .table__button:disabled, .table__button:disabled:hover, .table__button[aria-disabled=true], .table__button[aria-disabled=true]:hover, .table__button.table__button--disabled, .table__button.table__button--disabled:hover {
   background-color: transparent;
   border-color: transparent;
   color: var(--fkds-color-text-disabled, #8d8e91);
+  pointer-events: none;
+}
+.table__button[aria-disabled=true] {
+  pointer-events: none;
+}
+@media (forced-colors: active) {
+  .table__button[aria-disabled=true] {
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 .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;
@@ -5258,7 +5374,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%);
@@ -5269,7 +5385,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;
@@ -5309,6 +5425,7 @@ input[type=search]:focus,
 .table-ng__cell:focus, .table-ng__cell:focus-within {
   box-shadow: none;
   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);
@@ -5343,6 +5460,9 @@ input[type=search]:focus,
   box-shadow: inset 0 -3px 0 0 var(--fkds-color-border-strong, #5f6165);
   border-radius: 0;
 }
+.table-ng__cell .table-ng__editable {
+  min-block-size: calc(var(--f-font-size-standard, 1rem) * var(--f-line-height-large, 1.5) + 0.25rem * var(--f-density-factor, 1) * 2 + 6px);
+}
 .table-ng__cell .table-ng__editable:focus-within {
   box-shadow: inset 0 -3px 0 0 var(--fkds-color-border-strong, #5f6165);
   border-radius: 0;
@@ -5351,6 +5471,10 @@ input[type=search]:focus,
   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 {
   box-shadow: none !important;
 }
@@ -5430,7 +5554,7 @@ input[type=search]:focus,
   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 {
@@ -5440,6 +5564,7 @@ input[type=search]:focus,
 .table-ng__cell--custom:focus {
   box-shadow: none;
   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);
@@ -5466,6 +5591,7 @@ input[type=search]:focus,
   padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
   display: flex;
   align-items: center;
+  margin-block: 2px;
 }
 .table-ng__editable__text {
   flex: 1 1 auto;
@@ -5478,8 +5604,7 @@ input[type=search]:focus,
 @media (forced-colors: active) {
   .table-ng__editable {
     forced-color-adjust: none;
-    border-bottom-color: transparent;
-    border-bottom-width: 0;
+    color: CanvasText;
   }
   .table-ng__cell--text:hover .table-ng__editable,
   .table-ng__cell--select:hover .table-ng__editable,
@@ -5488,6 +5613,16 @@ input[type=search]:focus,
     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;
@@ -5496,8 +5631,8 @@ input[type=search]:focus,
 }
 .table-ng__column:focus, .table-ng__column:focus-within {
   box-shadow: none;
-  border-bottom: 2px solid var(--f-color-focus, #1b1e23);
-  border-right: 1px solid var(--f-color-focus, #1b1e23);
+  outline: 3px solid var(--fkds-color-text-primary, #1b1e23);
+  outline-offset: -3px;
 }
 .table-ng__column--selectable {
   text-align: center;
@@ -5509,6 +5644,10 @@ input[type=search]:focus,
   vertical-align: middle;
   accent-color: var(--fkds-color-action-background-primary-default, #4a52b6);
 }
+.table-ng__column--selectable input[type=checkbox]:focus,
+.table-ng__column--selectable input[type=checkbox]:focus-visible {
+  box-shadow: none;
+}
 .table-ng__column--rowheader {
   text-align: left;
   padding: calc(0.25rem * var(--f-density-factor, 1));
@@ -5763,7 +5902,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;
@@ -6359,9 +6498,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;
@@ -6373,13 +6524,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;
@@ -6414,7 +6582,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;