@fkui/design 6.16.1 → 6.18.0

package/lib/fkui.css

@@ -2156,7 +2156,7 @@ input[type=search]:focus,
   background-color: var(--fkds-color-select-background-primary-hover, #e5e5f5);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
-.calendar__year-selector__year--highlight {
+.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, #ffffff);
   font-weight: var(--f-font-weight-medium, 700);
@@ -2175,11 +2175,12 @@ input[type=search]:focus,
 
 .contextmenu {
   min-width: 260px;
-  background-color: var(--f-background-popupmenu, #ffffff);
+  background-color: var(--fkds-color-background-primary, #ffffff);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .contextmenu__list {
   margin: 0;
-  border: 1px solid var(--f-border-color-popupmenu, #ddddde);
+  border: var(--f-border-width-small, 1px) solid var(--fkds-color-border-primary, #8d8e91);
   padding: 0.5rem;
   display: block;
   list-style-type: none;
@@ -2194,11 +2195,11 @@ input[type=search]:focus,
 .contextmenu__list__item a,
 .contextmenu__list__item a:visited,
 .contextmenu__list__item a:active {
-  color: var(--f-text-color-popupmenu, #1b1e23);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .contextmenu__list__item:hover {
-  color: var(--f-text-color-popupmenu-hover, #1b1e23);
-  background-color: var(--f-background-popupmenu-vertical-hover, #ddddde);
+  color: var(--fkds-color-text-primary, #1b1e23);
+  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
 @media (min-width: 640px) {
   .contextmenu__list__item {
@@ -2209,7 +2210,7 @@ input[type=search]:focus,
   margin: 0.75rem;
   height: 1px;
   border: none;
-  border-top: 1px solid var(--f-border-color-separator-contextmenu, #8d8e91);
+  border-top: var(--f-border-width-small, 1px) solid var(--fkds-color-border-primary, #8d8e91);
 }
 .contextmenu__lefticon {
   margin-right: 0.75rem;
@@ -4267,7 +4268,6 @@ input[type=search]:focus,
   background-color: var(--fkds-color-feedback-background-negative, #fcf3f3);
   border-radius: var(--f-border-radius-small, 2px);
   border-left: 1rem solid var(--fkds-color-feedback-border-negative, #ca1515);
-  padding: 1.5rem;
 }
 .offline .offline__icon {
   font-size: 0;
@@ -4296,6 +4296,9 @@ input[type=search]:focus,
 .offline .iflex__item > p {
   margin-bottom: 0;
 }
+.offline {
+  padding: 1.5rem;
+}
 .offline__wrapper {
   position: fixed;
   position: sticky;
@@ -4902,16 +4905,6 @@ input[type=search]:focus,
   box-shadow: none;
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
   padding: calc(var(--f-button-tertiary-padding-top, 0.75rem) * var(--f-density-factor, 1)) var(--f-button-tertiary-padding-right, 0.5rem) calc(var(--f-button-tertiary-padding-bottom, 0.75rem) * var(--f-density-factor, 1)) var(--f-button-tertiary-padding-left, 0.5rem);
-  font-weight: var(--f-font-weight-medium, 700);
-  outline-offset: 0.25rem;
-  font-size: 14px;
-  line-height: 1.25rem;
-  min-width: 24px;
-  padding: calc(0.375rem * var(--f-density-factor, 1)) 0.25rem;
-  text-underline-offset: 3.5px;
-  margin: var(--f-button-tertiary-table-column-action-margin, 0 0 0 0.5rem);
-  width: -moz-max-content;
-  width: max-content;
 }
 .table__button:hover {
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
@@ -4932,6 +4925,18 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-text-disabled, #8d8e91);
 }
+.table__button {
+  font-weight: var(--f-font-weight-medium, 700);
+  outline-offset: 0.25rem;
+  font-size: 14px;
+  line-height: 1.25rem;
+  min-width: 24px;
+  padding: calc(0.375rem * var(--f-density-factor, 1)) 0.25rem;
+  text-underline-offset: 3.5px;
+  margin: var(--f-button-tertiary-table-column-action-margin, 0 0 0 0.5rem);
+  width: -moz-max-content;
+  width: max-content;
+}
 .table__button .button__icon {
   margin: var(--f-button-tertiary-table-column-action-icon-margin, 0 2px 0 2px);
   transform: translate(0, 10%);
@@ -4939,6 +4944,173 @@ input[type=search]:focus,
   width: 14px;
 }
 
+.table-ng {
+  border-collapse: separate;
+  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));
+  width: 100%;
+}
+.table-ng caption {
+  background: transparent;
+  color: var(--f-text-color-default, #1b1e23);
+  font-size: var(--f-font-size-standard, 1rem);
+  font-weight: var(--f-font-weight-medium, 700);
+  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%);
+  text-align: left;
+}
+.table-ng thead th {
+  background: var(--f-background-grid-header, #f4f4f4);
+  border-bottom: 2px solid var(--f-border-color-grid-header, #8d8e91);
+  border-right: 1px solid var(--f-border-color-grid, #8d8e91);
+  color: var(--f-text-color-default, #1b1e23);
+  font-weight: var(--f-font-weight-medium, 700);
+  line-height: var(--f-line-height-large, 1.5);
+  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
+  text-align: left;
+  vertical-align: top;
+}
+.table-ng thead th:last-child {
+  border-right: none;
+}
+.table-ng tbody .table-ng__row {
+  background: var(--f-background-grid-default, #ffffff);
+  color: var(--f-text-color-default, #1b1e23);
+}
+.table-ng--striped tbody .table-ng__row:nth-child(even) {
+  background: var(--f-background-grid-striped, #f4f4f4);
+  color: var(--f-text-color-default, #1b1e23);
+}
+
+.table-ng__cell {
+  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
+  text-wrap: nowrap;
+  border: 2px solid transparent;
+}
+.table-ng__cell:focus, .table-ng__cell:focus-within {
+  box-shadow: none;
+  border: 2px solid var(--f-color-focus, #1b1e23);
+}
+.table-ng__cell input:focus,
+.table-ng__cell button:focus,
+.table-ng__cell a:focus,
+.table-ng__cell [role=combobox]:focus {
+  box-shadow: none;
+}
+.table-ng__cell--select, .table-ng__cell--text {
+  padding: 0 0.25rem;
+}
+.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--text:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.table-ng__cell--text.table-ng__cell--error:not(:focus-within) .table-ng__editable__icon {
+  visibility: visible;
+}
+.table-ng__cell--text .table-ng__editable {
+  border-width: 2px;
+  border-style: solid;
+  border-color: transparent;
+}
+.table-ng__cell--text .table-ng__editable:focus-within .table-ng__editable__text {
+  display: none;
+}
+.table-ng__cell--text .table-ng__editable:focus-within .table-ng__textedit {
+  flex: 1 0 auto;
+}
+.table-ng__cell--checkbox, .table-ng__cell--radio {
+  text-align: center;
+  padding: calc(0.25rem * var(--f-density-factor, 1));
+}
+.table-ng__cell--checkbox input, .table-ng__cell--radio input {
+  height: var(--f-icon-size-medium, 1.25rem);
+  width: var(--f-icon-size-medium, 1.25rem);
+}
+.table-ng__cell--button button {
+  background: inherit;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  min-width: var(--f-icon-size-medium, 1.25rem);
+  padding: 0;
+  width: 100%;
+}
+
+.table-ng__textedit {
+  flex: 0 1 0;
+  width: 0;
+  border: none;
+  padding: 0;
+  background: transparent;
+}
+.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;
+}
+.table-ng__editable__text {
+  flex: 1 1 auto;
+}
+.table-ng__editable__icon {
+  visibility: hidden;
+  margin-left: 1rem;
+  flex: none;
+}
+
+.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 {
+  color: var(--fkds-color-feedback-text-negative, #ca1515);
+  border-bottom-color: var(--fkds-color-feedback-text-negative, #ca1515);
+}
+
+.table-ng__column {
+  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
+  border-bottom: 2px solid transparent;
+  border-right: 1px solid transparent;
+}
+.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);
+}
+.table-ng__column--checkbox {
+  text-align: center;
+  padding: calc(0.25rem * var(--f-density-factor, 1));
+}
+.table-ng__column--checkbox input {
+  height: var(--f-icon-size-medium, 1.25rem);
+  width: var(--f-icon-size-medium, 1.25rem);
+}
+.table-ng__column__sort-icon {
+  color: var(--f-icon-color-table-header, #1b1e23);
+  height: var(--f-icon-size-x-small, 0.75rem);
+  width: var(--f-icon-size-x-small, 0.75rem);
+  min-width: var(--f-icon-size-x-small, 0.75rem);
+}
+.table-ng__column__sort-icon--discrete {
+  color: var(--f-icon-color-table-header-discrete, #8d8e91);
+}
+
+.pager {
+  border-bottom: 1px solid var(--f-border-color-grid, #8d8e91);
+}
+
 .text-field {
   display: flex;
   flex-direction: column;
@@ -4946,7 +5118,6 @@ input[type=search]:focus,
   margin: 0 0 calc(var(--f-margin-component-bottom, 1.5rem) * var(--f-density-factor, 1));
   position: relative;
   width: var(--f-width-full, 100%);
-  /* stylelint-disable property-no-vendor-prefix */
 }
 @media (min-width: 640px) {
   .text-field--inline {
@@ -5041,6 +5212,9 @@ input[type=search]:focus,
   height: var(--f-icon-size-x-small, 0.75rem);
   width: var(--f-icon-size-x-small, 0.75rem);
 }
+.text-field {
+  /* stylelint-disable property-no-vendor-prefix */
+}
 .text-field input[type=search]::-webkit-search-decoration,
 .text-field input[type=search]::-webkit-search-cancel-button,
 .text-field input[type=search]::-webkit-search-results-button,