@fkui/design 6.39.0 → 6.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.39.0",
+  "version": "6.40.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.40.0",
+    "@fkui/theme-default": "6.40.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.40.0",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -68,5 +68,5 @@
     "npm": ">= 7"
   },
   "sass": "./src/fkui.scss",
-  "gitHead": "dcb4ae0482dae1d80806b45900c8b80771de7372"
+  "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

@@ -323,7 +323,8 @@ $button--tertiary: (
             }
         }
 
-        &:disabled {
+        &:disabled,
+        &[aria-disabled="true"] {
             border: none;
         }
 
@@ -337,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;
@@ -350,7 +352,8 @@ $button--tertiary: (
             text-decoration-thickness: 2px;
             text-underline-offset: 4px;
 
-            &:disabled {
+            &:disabled,
+            &[aria-disabled="true"] {
                 text-decoration: none;
             }
         }
@@ -464,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/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/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/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,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;
         }
     }
 
@@ -268,8 +271,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;
+        }
     }
 }