@fkui/design 6.39.0 → 6.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.39.0",
+  "version": "6.41.0",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -39,8 +39,8 @@
     "unit:watch": "node --test --watch"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.39.0",
-    "@fkui/theme-default": "6.39.0",
+    "@fkui/icon-lib-default": "6.41.0",
+    "@fkui/theme-default": "6.41.0",
     "autoprefixer": "10.4.27",
     "cssnano": "7.1.3",
     "glob": "13.0.6",
@@ -51,7 +51,7 @@
     "svgo": "4.0.1"
   },
   "peerDependencies": {
-    "@fkui/theme-default": "^6.39.0",
+    "@fkui/theme-default": "^6.41.0",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -68,5 +68,5 @@
     "npm": ">= 7"
   },
   "sass": "./src/fkui.scss",
-  "gitHead": "dcb4ae0482dae1d80806b45900c8b80771de7372"
+  "gitHead": "b5a8d5801dff4745cf7007b9209a9bc5a8bbe40c"
 }

package/src/components/_index.scss

@@ -10,6 +10,7 @@
 @forward "contextmenu/variables";
 @forward "crud-dataset/variables";
 @forward "datepicker-field/variables";
+@forward "definition-list/variables";
 @forward "dialogue-tree/variables";
 @forward "entrypoint/variables";
 @forward "error-list/variables";
@@ -61,6 +62,7 @@
 @use "contextmenu";
 @use "crud-dataset";
 @use "datepicker-field";
+@use "definition-list";
 @use "dialogue-tree";
 @use "entrypoint";
 @use "error-list";

package/src/components/button/_button-group.scss

@@ -0,0 +1,62 @@
+@use "../../core";
+@use "../../core/size";
+
+@mixin button-group-margin($margin-bottom, $margin-right) {
+    margin-bottom: $margin-bottom;
+    margin-right: $margin-right;
+
+    &:last-child {
+        margin-right: 0;
+    }
+}
+
+.button-group {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: core.densify(size.$margin-050);
+    margin-top: core.densify(size.$margin-025);
+
+    &--end {
+        justify-content: flex-end;
+    }
+
+    &__item {
+        margin: 0;
+        margin-bottom: core.densify(size.$margin-100);
+
+        @include core.breakpoint-up(md) {
+            @include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
+        }
+    }
+
+    > .button--discrete {
+        @include button-group-margin(core.densify(size.$margin-100), size.$margin-150);
+    }
+
+    > .button--small {
+        @include button-group-margin(core.densify(size.$margin-075), size.$margin-075);
+
+        &.button--full-width {
+            @include core.breakpoint-down(sm) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    > .button--medium {
+        @include button-group-margin(core.densify(size.$margin-075), size.$margin-100);
+
+        &.button--full-width {
+            @include core.breakpoint-down(sm) {
+                margin-right: 0;
+            }
+        }
+    }
+
+    > .button--large {
+        @include core.breakpoint-up(md) {
+            @include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
+        }
+    }
+}

package/src/components/button/_button-list.scss

@@ -0,0 +1,22 @@
+@use "../../core";
+@use "../../core/size";
+
+.button-list {
+    margin-bottom: core.densify(size.$margin-050);
+    margin-top: core.densify(size.$margin-025);
+    padding-left: 0;
+
+    > li button {
+        margin: 0;
+        margin-bottom: core.densify(size.$margin-100);
+
+        &.button.button--small,
+        &.button.button--medium {
+            margin-bottom: core.densify(size.$margin-075);
+        }
+
+        &.button.button--large {
+            margin-bottom: core.densify(size.$margin-100);
+        }
+    }
+}

package/src/components/button/_button.scss

@@ -2,85 +2,6 @@
 @use "../../core/size";
 @use "variables" as *;
 
-@mixin button-group-margin($margin-bottom, $margin-right) {
-    margin-bottom: $margin-bottom;
-    margin-right: $margin-right;
-
-    &:last-child {
-        margin-right: 0;
-    }
-}
-
-/// Button group and button list
-.button-group {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: core.densify(size.$margin-050);
-    margin-top: core.densify(size.$margin-025);
-
-    .button-group__item {
-        margin: 0;
-        margin-bottom: core.densify(size.$margin-100);
-
-        @include core.breakpoint-up(md) {
-            @include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
-        }
-    }
-
-    > .button.button--discrete {
-        @include button-group-margin(core.densify(size.$margin-100), size.$margin-150);
-    }
-
-    > .button.button--small {
-        @include button-group-margin(core.densify(size.$margin-075), size.$margin-075);
-        &.button--full-width {
-            @include core.breakpoint-down(sm) {
-                margin-right: 0;
-            }
-        }
-    }
-
-    > .button.button--medium {
-        @include button-group-margin(core.densify(size.$margin-075), size.$margin-100);
-        &.button--full-width {
-            @include core.breakpoint-down(sm) {
-                margin-right: 0;
-            }
-        }
-    }
-
-    > .button.button--large {
-        @include core.breakpoint-up(md) {
-            @include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
-        }
-    }
-
-    &--end {
-        justify-content: flex-end;
-    }
-}
-
-.button-list {
-    margin-bottom: core.densify(size.$margin-050);
-    margin-top: core.densify(size.$margin-025);
-    padding-left: 0;
-
-    > li button {
-        margin: 0;
-        margin-bottom: core.densify(size.$margin-100);
-
-        &.button.button--small,
-        &.button.button--medium {
-            margin-bottom: core.densify(size.$margin-075);
-        }
-
-        &.button.button--large {
-            margin-bottom: core.densify(size.$margin-100);
-        }
-    }
-}
-
 /// Primary button
 $button--primary: (
     background-color: $button-primary-color-background-default,
@@ -323,7 +244,8 @@ $button--tertiary: (
             }
         }
 
-        &:disabled {
+        &:disabled,
+        &[aria-disabled="true"] {
             border: none;
         }
 
@@ -337,7 +259,8 @@ $button--tertiary: (
                 background-color: $button-tertiary-inverted-color-background-focus;
             }
 
-            &:disabled {
+            &:disabled,
+            &[aria-disabled="true"] {
                 color: $button-tertiary-inverted-color-text-disabled;
                 border: none;
                 border-width: 0;
@@ -350,7 +273,8 @@ $button--tertiary: (
             text-decoration-thickness: 2px;
             text-underline-offset: 4px;
 
-            &:disabled {
+            &:disabled,
+            &[aria-disabled="true"] {
                 text-decoration: none;
             }
         }
@@ -464,6 +388,8 @@ $button--tertiary: (
     &.disabled:hover,
     &:disabled,
     &:disabled:hover,
+    &[aria-disabled="true"],
+    &[aria-disabled="true"]:hover,
     &.button--disabled {
         border-width: var(--f-border-width-medium);
         box-shadow: none;

package/src/components/button/_index.scss

@@ -1 +1,3 @@
 @use "button";
+@use "button-group";
+@use "button-list";

package/src/components/datepicker-field/_datepicker-field.scss

@@ -24,15 +24,27 @@ $calendar-width: calc(100vw - #{$popup-spacing});
             height: core.densify(var(--f-icon-size-x-large));
             width: core.densify(var(--f-icon-size-x-large));
             vertical-align: middle;
+
+            @media (forced-colors: active) {
+                color: ButtonBorder;
+            }
         }
 
         &:hover {
             .icon {
                 color: $datepickerfield-f-icon-calendar-color-content-hover;
+
+                @media (forced-colors: active) {
+                    color: LinkText;
+                }
             }
         }
         &:disabled .icon {
             color: $datepickerfield-f-icon-calendar-color-content-disabled;
+
+            @media (forced-colors: active) {
+                color: GrayText;
+            }
         }
     }
 
@@ -52,6 +64,7 @@ $calendar-width: calc(100vw - #{$popup-spacing});
     &__close > &__close__button {
         margin: 0;
         padding: 1rem;
+        align-items: center;
     }
 }
 

package/src/components/definition-list/_definition-list.scss

@@ -0,0 +1,23 @@
+@use "../../core/size";
+@use "variables" as *;
+
+.definition-list {
+    margin: 0;
+    color: $definitionlist-text-color-default;
+
+    &__term {
+        float: left;
+        clear: left;
+        margin-right: size.$margin-025;
+        font-weight: var(--f-font-weight-medium);
+    }
+
+    &__term::after {
+        content: ":";
+    }
+
+    &__definition {
+        margin-left: 0;
+        margin-bottom: 0.25rem;
+    }
+}

package/src/components/definition-list/_index.scss

@@ -0,0 +1 @@
+@use "definition-list";

package/src/components/definition-list/_variables.scss

@@ -0,0 +1 @@
+$definitionlist-text-color-default: var(--fkds-color-text-primary) !default;

package/src/components/dialogue-tree/_dialogue-tree.scss

@@ -34,6 +34,7 @@
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+                cursor: pointer;
 
                 span {
                     display: -webkit-box;
@@ -43,7 +44,6 @@
                     font-weight: var(--f-font-weight-medium);
                     font-size: var(--f-font-size-standard);
                     text-align: left;
-                    cursor: pointer;
                 }
 
                 .icon {

package/src/components/file-item/_file-item.scss

@@ -57,7 +57,8 @@
     &__file-name {
         margin-left: size.$margin-025;
         min-width: 0;
-        overflow-wrap: break-word;
+        overflow-wrap: anywhere;
+        hyphens: auto;
         white-space: normal;
     }
 

package/src/components/file-selector/_file-selector.scss

@@ -9,14 +9,19 @@
             @include focus-indicator;
         }
     }
+    label.button.button--tertiary {
+        @media (forced-colors: active) {
+            border-color: ButtonBorder;
+            color: ButtonText;
+        }
 
-    label {
         cursor: pointer;
     }
-
-    input:disabled + label {
-        background-color: transparent;
-        border-color: transparent;
+    input[aria-disabled="true"] + label.button.button--tertiary {
         cursor: default;
+        @media (forced-colors: active) {
+            color: GrayText;
+            border-color: GrayText;
+        }
     }
 }

package/src/components/loader/_loader.scss

@@ -55,6 +55,10 @@
         height: size.$padding-100;
         position: absolute;
         width: size.$padding-100;
+
+        @media (forced-colors: active) {
+            background-color: CanvasText;
+        }
     }
 
     &__wait-text {
@@ -85,6 +89,10 @@
 
         .loader__circle {
             background-color: $loader-circle-inverted-color-background;
+
+            @media (forced-colors: active) {
+                background-color: CanvasText;
+            }
         }
     }
 

package/src/components/paginator/_paginator.scss

@@ -38,7 +38,7 @@ $paginator-width-full: $button-width + $gap-size + $page-width * $number-of-page
 
         &--active {
             color: var(--fkds-color-action-text-inverted-default);
-            background-color: var(--fkds-color-action-background-primary-default);
+            background-color: var(--fkds-color-select-background-primary-default);
             @include forcedcolors.selected-indicator;
         }
 

package/src/components/select-field/_select-field.scss

@@ -38,6 +38,10 @@
         padding: var(--padding-input-fields);
         width: var(--f-width-full);
 
+        @media (forced-colors: active) {
+            border-color: ButtonBorder;
+        }
+
         &:hover {
             background-color: $selectfield-color-background-hover;
         }
@@ -70,6 +74,10 @@
         @extend %icon--inset-top-right;
 
         color: $selectfield-f-icon-arrow-down-color-content-default;
+
+        @media (forced-colors: active) {
+            color: buttonText;
+        }
     }
 
     &__error-popup-icon {

package/src/components/sort-filter-dataset/_sort-filter-dataset.scss

@@ -1,69 +1,15 @@
 @use "../../core";
 @use "../../core/size";
-@use "variables" as *;
-
-// Selectfield
-$sortfilter-field-margin-bottom: 0.85rem !default;
-
-// Selectfield label
-$sortfilter-field-label-margin-right: size.$margin-100 !default;
-$sortfilter-field-label-padding-top: size.$padding-050 !default;
-
-// Header
-$sortfilter-header-font-size: var(--f-font-size-h2) !default;
-$sortfilter-header-padding-top: size.$padding-025 !default;
 
 .sort-filter-dataset {
     &__sort {
         min-width: 80px;
     }
 
-    &__search {
-        position: relative;
-
-        input {
-            padding-left: 2.1rem;
-            padding-right: 2.1rem;
-
-            @include core.breakpoint-up(md) {
-                width: 160px;
-            }
-        }
-
-        &__magnify-icon {
-            position: absolute;
-            left: size.$margin-175;
-            height: var(--f-height-large);
-
-            /* same as textfield */
-            z-index: 1;
-
-            /* In front of input field */
-            width: 1.2rem;
-            color: $sort-filter-dateset-color-icon-search;
-
-            @include core.breakpoint-down(sm) {
-                top: size.$margin-150;
-                left: size.$margin-075;
-            }
-        }
-
-        &__close-icon.button--discrete {
-            position: absolute;
-            top: calc(-1 * size.$margin-075);
-            right: 0;
-            color: $sort-filter-dateset-color-icon-clear;
-            cursor: pointer;
-            padding: 1rem;
-
-            @include core.breakpoint-down(sm) {
-                top: size.$margin-100;
-            }
-        }
-
-        &__close-icon.button--discrete:hover {
-            box-shadow: none;
-            background-color: transparent;
+    &__search input {
+        @include core.breakpoint-up(md) {
+            // technical debt: should use `FTextField` `input-width` prop but is not compatible with `inline`.
+            width: 160px;
         }
     }
 }

package/src/components/sort-filter-dataset/_variables.scss

@@ -1,2 +1 @@
-$sort-filter-dateset-color-icon-clear: var(--fkds-color-text-secondary) !default;
-$sort-filter-dateset-color-icon-search: var(--fkds-color-text-secondary) !default;
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/table-ng/_cell.scss

@@ -5,6 +5,7 @@
 $vertical-padding: core.densify(size.$padding-025);
 $horizontal-padding: size.$padding-050;
 $underline-thickness: 3px;
+$editable-min-height: calc(var(--f-font-size-standard) * var(--f-line-height-large) + ($vertical-padding * 2) + ($table-ng-selection-outline * 2));
 
 .table-ng__cell {
     padding: $vertical-padding $horizontal-padding;
@@ -14,8 +15,8 @@ $underline-thickness: 3px;
     &:focus,
     &:focus-within {
         box-shadow: none;
-        outline: 3px solid $table-ng-cell-color-outline;
-        outline-offset: -3px;
+        outline: $table-ng-selection-outline solid $table-ng-cell-color-outline;
+        outline-offset: -$table-ng-selection-outline;
     }
 
     &:not(&--menu-open):hover:has(button) {
@@ -67,6 +68,8 @@ $underline-thickness: 3px;
     }
 
     .table-ng__editable {
+        min-block-size: $editable-min-height;
+
         &:focus-within {
             box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-underline;
             border-radius: 0;
@@ -203,8 +206,8 @@ $underline-thickness: 3px;
 
         &:focus {
             box-shadow: none;
-            outline: 3px solid $table-ng-cell-color-outline;
-            outline-offset: -3px;
+            outline: $table-ng-selection-outline solid $table-ng-cell-color-outline;
+            outline-offset: -$table-ng-selection-outline;
         }
     }
 
@@ -242,6 +245,7 @@ $underline-thickness: 3px;
 
     &__text {
         flex: 1 1 auto;
+        white-space: pre;
     }
 
     &__numeric {
@@ -268,8 +272,8 @@ $underline-thickness: 3px;
 
     .table-ng [tabindex="0"]:focus,
     .table-ng [tabindex="0"]:focus-visible {
-        outline: 3px solid CanvasText;
-        outline-offset: -3px;
+        outline: $table-ng-selection-outline solid CanvasText;
+        outline-offset: -$table-ng-selection-outline;
         background: transparent;
     }
 

package/src/components/table-ng/_column.scss

@@ -13,8 +13,8 @@ $horizontal-padding: size.$padding-050;
     &:focus,
     &:focus-within {
         box-shadow: none;
-        border-bottom: 2px solid var(--f-color-focus);
-        border-right: 1px solid var(--f-color-focus);
+        outline: $table-ng-selection-outline solid $table-ng-cell-color-outline;
+        outline-offset: -$table-ng-selection-outline;
     }
 
     &--selectable {
@@ -27,6 +27,11 @@ $horizontal-padding: size.$padding-050;
             vertical-align: middle;
             accent-color: $table-ng-button-primary-color-background-default;
         }
+
+        input[type="checkbox"]:focus,
+        input[type="checkbox"]:focus-visible {
+            box-shadow: none;
+        }
     }
 
     &--rowheader {

package/src/components/table-ng/_variables.scss

@@ -1,3 +1,6 @@
+// Selection
+$table-ng-selection-outline: 3px;
+
 // Caption
 $table-ng-caption-background: transparent !default;
 $table-ng-caption-foreground: var(--fkds-color-text-primary) !default;

package/src/core/mixins/_button.scss

@@ -50,10 +50,21 @@
     &.disabled:hover,
     &:disabled,
     &:disabled:hover,
+    &[aria-disabled="true"],
+    &[aria-disabled="true"]:hover,
     &#{$name}--disabled,
     &#{$name}--disabled:hover {
         background-color: $background-color--disabled;
         border-color: $border-color--disabled;
         color: $color--disabled;
+        pointer-events: none;
+    }
+
+    &[aria-disabled="true"] {
+        pointer-events: none;
+        @media (forced-colors: active) {
+            color: GrayText;
+            border-color: GrayText;
+        }
     }
 }

package/src/internal-components/calendar-navbar/_calendar-navbar.scss

@@ -5,7 +5,11 @@
 
 $calendar-icon-padding: 5px;
 $calendar-icon-disabled-border-width: 1px;
+$calendar-icon-forced-colors-border-width: 2px;
 $calendar-icon-disabled-padding: calc($calendar-icon-padding - $calendar-icon-disabled-border-width);
+$calendar-icon-disabled-forced-colors-padding: calc($calendar-icon-padding - $calendar-icon-forced-colors-border-width);
+$calendar-icon-forced-colors-padding: calc($calendar-icon-padding - $calendar-icon-forced-colors-border-width);
+
 %calendar-title {
     font-size: 1.5rem;
     font-weight: bold;
@@ -71,12 +75,27 @@ $calendar-icon-disabled-padding: calc($calendar-icon-padding - $calendar-icon-di
         border-radius: 50%;
         box-shadow: var(--f-button-shadow);
 
+        @media (forced-colors: active) {
+            background-color: transparent;
+            border: $calendar-icon-forced-colors-border-width solid ButtonBorder;
+            color: ButtonText;
+            padding: $calendar-icon-forced-colors-padding;
+        }
+
         &--disabled {
             color: $calendarnavbar-f-icon-arrow-color-content-disabled;
             background-color: $calendarnavbar-button-color-background-disabled;
             padding: $calendar-icon-disabled-padding;
             border: $calendar-icon-disabled-border-width solid $calendarnavbar-button-color-border-disabled;
             box-shadow: none;
+
+            @media (forced-colors: active) {
+                background-color: transparent;
+                border-color: GrayText;
+                border-width: $calendar-icon-forced-colors-border-width;
+                color: GrayText;
+                padding: $calendar-icon-disabled-forced-colors-padding;
+            }
         }
     }
 
@@ -86,5 +105,9 @@ $calendar-icon-disabled-padding: calc($calendar-icon-padding - $calendar-icon-di
         border: none;
         background-color: transparent;
         cursor: pointer;
+
+        @media (forced-colors: active) {
+            border-color: ButtonBorder;
+        }
     }
 }