@fkui/design 6.38.0 → 6.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.38.0",
+  "version": "6.40.0",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -39,19 +39,19 @@
     "unit:watch": "node --test --watch"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.38.0",
-    "@fkui/theme-default": "6.38.0",
+    "@fkui/icon-lib-default": "6.40.0",
+    "@fkui/theme-default": "6.40.0",
     "autoprefixer": "10.4.27",
-    "cssnano": "7.1.2",
+    "cssnano": "7.1.3",
     "glob": "13.0.6",
     "picocolors": "1.1.1",
-    "postcss": "8.5.6",
+    "postcss": "8.5.8",
     "postcss-url": "10.1.3",
     "postcss-var-func-fallback": "3.0.1",
-    "svgo": "4.0.0"
+    "svgo": "4.0.1"
   },
   "peerDependencies": {
-    "@fkui/theme-default": "^6.38.0",
+    "@fkui/theme-default": "^6.40.0",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -68,5 +68,5 @@
     "npm": ">= 7"
   },
   "sass": "./src/fkui.scss",
-  "gitHead": "ea8e50d8567159581a628106e93ac0e7c1d43a1b"
+  "gitHead": "fffdc47340a925f20f586117a1a5bbb2e2ec8a48"
 }

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.scss

@@ -241,6 +241,7 @@ $button--tertiary: (
         font-weight: var(--f-font-weight-bold);
         outline-offset: size.$padding-025;
         line-height: calc(1.25 * var(--f-font-size-standard));
+        align-items: flex-start;
 
         @include core.make-button-variant(".button", $button--discrete...);
 
@@ -268,6 +269,9 @@ $button--tertiary: (
         &:hover {
             border-radius: var(--f-button-discrete-radius-hover);
         }
+        & > .button__icon {
+            flex-shrink: 0;
+        }
     }
 
     &.button--discrete-inverted {
@@ -319,7 +323,8 @@ $button--tertiary: (
             }
         }
 
-        &:disabled {
+        &:disabled,
+        &[aria-disabled="true"] {
             border: none;
         }
 
@@ -333,7 +338,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;
@@ -346,7 +352,8 @@ $button--tertiary: (
             text-decoration-thickness: 2px;
             text-underline-offset: 4px;
 
-            &:disabled {
+            &:disabled,
+            &[aria-disabled="true"] {
                 text-decoration: none;
             }
         }
@@ -460,6 +467,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/contextmenu/_contextmenu.scss

@@ -22,6 +22,7 @@
             display: flex;
             align-items: center;
             padding: size.$padding-075;
+            margin: size.$margin-050 0;
 
             a,
             a:visited,

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

@@ -52,6 +52,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/expandable-panel/_variables.scss

@@ -1,6 +1,6 @@
 // HEADING
-$expandablepanel-heading-color-background-default: var(--fkds-color-background-secondary) !default;
-$expandablepanel-heading-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
+$expandablepanel-heading-color-background-default: var(--fkds-color-interactive-surface-background-primary-default) !default;
+$expandablepanel-heading-color-background-hover: var(--fkds-color-interactive-surface-background-primary-hover) !default;
 $expandablepanel-heading-color-text-default: var(--fkds-color-text-primary) !default;
 $expandablepanel-heading-color-border: var(--fkds-color-border-primary) !default;
 $expandablepanel-heading-notification-color-background: var(--fkds-color-feedback-background-negative-strong) !default;

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/navigation-menu/_navigation-menu.scss

@@ -1,5 +1,6 @@
 @use "../../core/size";
 @use "../../core/mixins/breakpoints";
+@use "../../core/mixins/forcedcolors";
 @use "../../core/config-variables";
 @use "variables" as *;
 
@@ -18,10 +19,18 @@
             a:visited,
             a:active {
                 color: $navigationmenu-menuitem-color-text-active;
+
+                @media (forced-colors: active) {
+                    color: LinkText;
+                }
             }
 
             a:hover {
                 color: $navigationmenu-menuitem-color-text-hover;
+
+                @media (forced-colors: active) {
+                    color: LinkText;
+                }
             }
         }
     }
@@ -53,14 +62,20 @@
             &:hover {
                 font-weight: var(--f-font-weight-normal);
                 background-color: $navigationmenu-vertical-color-background-hover;
+                @include forcedcolors.hover-indicator(outline, 2px);
             }
 
             &--highlight {
                 font-weight: var(--f-font-weight-medium);
                 background-color: $navigationmenu-vertical-color-background-selected;
+                @include forcedcolors.selected-indicator;
 
                 .imenu__list__anchor {
                     color: $navigationmenu-vertical-menuitem-color-text-selected;
+
+                    @media (forced-colors: active) {
+                        color: HighlightText;
+                    }
                 }
             }
 
@@ -68,6 +83,7 @@
                 background-color: $navigationmenu-vertical-color-background-selected;
                 font-weight: var(--f-font-weight-medium);
                 color: $navigationmenu-vertical-menuitem-color-text-selected;
+                @include forcedcolors.selected-indicator;
             }
         }
     }
@@ -90,6 +106,7 @@
 
                 .imenu__list__anchor-container {
                     border-bottom: 5px solid $navigationmenu-horizontal-color-border-selected;
+                    @include forcedcolors.hover-indicator(border-bottom, 5px);
                 }
 
                 .imenu__list__anchor:hover {
@@ -104,11 +121,16 @@
 
         &__item:not(.imenu__list__item--highlight) .imenu__list__anchor-container:hover {
             border-bottom: 5px solid $navigationmenu-horizontal-color-border-hover;
+            @include forcedcolors.hover-indicator(border-bottom, 5px);
         }
 
         &__anchor-container {
             padding-bottom: size.$padding-050;
             border-bottom: 5px solid transparent;
+
+            @media (forced-colors: active) {
+                border-bottom: none;
+            }
         }
 
         &__anchor {

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/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,7 +15,8 @@ $underline-thickness: 3px;
     &:focus,
     &:focus-within {
         box-shadow: none;
-        outline: 3px solid $table-ng-cell-color-outline;
+        outline: $table-ng-selection-outline solid $table-ng-cell-color-outline;
+        outline-offset: -$table-ng-selection-outline;
     }
 
     &:not(&--menu-open):hover:has(button) {
@@ -66,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;
@@ -77,6 +81,13 @@ $underline-thickness: 3px;
         }
     }
 
+    &--select {
+        .table-ng__editable {
+            border: 3px solid transparent;
+            box-sizing: border-box;
+        }
+    }
+
     &--text {
         &:focus-visible {
             box-shadow: none !important;
@@ -195,7 +206,8 @@ $underline-thickness: 3px;
 
         &:focus {
             box-shadow: none;
-            outline: 3px solid $table-ng-cell-color-outline;
+            outline: $table-ng-selection-outline solid $table-ng-cell-color-outline;
+            outline-offset: -$table-ng-selection-outline;
         }
     }
 
@@ -229,6 +241,7 @@ $underline-thickness: 3px;
     padding: $vertical-padding $horizontal-padding;
     display: flex;
     align-items: center;
+    margin-block: 2px;
 
     &__text {
         flex: 1 1 auto;
@@ -245,8 +258,7 @@ $underline-thickness: 3px;
 @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,
@@ -256,4 +268,16 @@ $underline-thickness: 3px;
         box-shadow: inset 0 (-$underline-thickness) 0 0 Highlight;
         border-radius: 0;
     }
+
+    .table-ng [tabindex="0"]:focus,
+    .table-ng [tabindex="0"]:focus-visible {
+        outline: $table-ng-selection-outline solid CanvasText;
+        outline-offset: -$table-ng-selection-outline;
+        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;
+    }
 }

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/popup-menu/_popup-menu.scss

@@ -1,5 +1,6 @@
 @use "../../core/size";
 @use "../../core/mixins/breakpoints";
+@use "../../core/mixins/forcedcolors";
 @use "../../core/config-variables";
 @use "variables" as *;
 
@@ -20,10 +21,18 @@
             a:visited,
             a:active {
                 color: $popupmenu-color-text-active;
+
+                @media (forced-colors: active) {
+                    color: LinkText;
+                }
             }
 
             a:hover {
                 color: $popupmenu-color-text-hover;
+
+                @media (forced-colors: active) {
+                    color: LinkText;
+                }
             }
         }
     }
@@ -39,14 +48,20 @@
 
             &:hover:not(.ipopupmenu__list__item--highlight) {
                 background-color: $popupmenu-color-background-hover;
+                @include forcedcolors.hover-indicator(outline, 2px);
             }
 
             &--highlight {
                 background-color: $popupmenu-color-background-selected;
                 font-weight: var(--f-font-weight-medium);
+                @include forcedcolors.selected-indicator;
 
                 & a {
                     color: $popupmenu-color-text-selected;
+
+                    @media (forced-colors: active) {
+                        color: HighlightText;
+                    }
                 }
             }
         }