@fkui/design 6.27.0 → 6.29.0

package/lib/fkui.css

@@ -107,7 +107,6 @@ h2,
 .heading--h2,
 h3,
 .heading--h3,
-.expandable-panel__heading,
 h4,
 .heading--h4,
 h5,
@@ -129,7 +128,7 @@ h2, .heading--h2 {
   color: var(--f-text-color-heading-2, inherit);
 }
 
-h3, .heading--h3, .expandable-panel__heading {
+h3, .heading--h3 {
   font-size: var(--f-font-size-h3, 1.375rem);
   color: var(--f-text-color-heading-3, inherit);
 }
@@ -159,7 +158,6 @@ h6, .heading--h6 {
 * + .heading--h2,
 * + h3,
 * + .heading--h3,
-* + .expandable-panel__heading,
 * + h4,
 * + .heading--h4,
 * + h5,
@@ -176,7 +174,7 @@ h6, .heading--h6 {
   h2, .heading--h2 {
     font-size: var(--f-font-size-xxx-large, 1.5rem);
   }
-  h3, .heading--h3, .expandable-panel__heading {
+  h3, .heading--h3 {
     font-size: var(--f-font-size-h4, 1.25rem);
   }
   h4, .heading--h4 {
@@ -201,7 +199,7 @@ h6, .heading--h6 {
   /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
 }
 
-.heading--h3, .expandable-panel__heading {
+.heading--h3 {
   /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
 }
 
@@ -221,11 +219,11 @@ h1 + h2, .heading--h1 + h2, h1 + .heading--h2, .heading--h1 + .heading--h2 {
   margin-top: 1rem;
 }
 
-h2 + h3, .heading--h2 + h3, h2 + .heading--h3, h2 + .expandable-panel__heading, .heading--h2 + .heading--h3, .heading--h2 + .expandable-panel__heading {
+h2 + h3, .heading--h2 + h3, h2 + .heading--h3, .heading--h2 + .heading--h3 {
   margin-top: 1rem;
 }
 
-h3 + h4, .heading--h3 + h4, .expandable-panel__heading + h4, h3 + .heading--h4, .heading--h3 + .heading--h4, .expandable-panel__heading + .heading--h4 {
+h3 + h4, .heading--h3 + h4, h3 + .heading--h4, .heading--h3 + .heading--h4 {
   margin-top: 1rem;
 }
 
@@ -2701,70 +2699,80 @@ input[type=search]:focus,
 .expandable-panel {
   margin-bottom: calc(2rem * var(--f-density-factor, 1));
 }
-.expandable-panel__icon {
-  border-radius: 50%;
-  background-color: var(--f-icon-color-expandable-panel, #fff);
+.expandable-panel__icon svg {
   width: var(--f-icon-size-medium, 1.25rem);
   height: var(--f-icon-size-medium, 1.25rem);
-  margin-top: calc((var(--f-line-height-medium, 1.4) * 1em - var(--f-icon-size-medium, 1.25rem)) / 2);
-  display: flex;
-  color: var(--f-background-heading-expandable-panel, #116a3e);
-  padding: 3px;
-  flex-shrink: 0;
-  margin-right: 0.5rem;
-}
-.expandable-panel__icon .icon {
-  transition: transform var(--f-animation-duration-long, 500ms) ease;
+  max-height: initial;
+  max-width: initial;
+  vertical-align: middle;
 }
-.expandable-panel.expandable-panel--expanded .expandable-panel__icon svg:nth-child(2) {
-  transform: rotate(0);
+.expandable-panel.expandable-panel--expanded .expandable-panel__icon svg {
+  transform: rotate(180deg);
 }
 .expandable-panel.expandable-panel--expanded .expandable-panel__content {
   height: auto;
 }
 .expandable-panel.expandable-panel--expanded .expandable-panel__heading button {
-  border: var(--f-expandable-panel-heading-border-open, none);
+  border-radius: var(--f-border-radius-medium, 4px) var(--f-border-radius-medium, 4px) 0 0;
 }
-.expandable-panel.expandable-panel--collapsed .expandable-panel__icon svg:nth-child(2) {
-  transform: rotate(-90deg);
+.expandable-panel.expandable-panel--collapsed .expandable-panel__icon svg {
+  transform: rotate(0);
 }
 .expandable-panel__heading {
-  /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
   margin-bottom: 0 !important;
 }
 .expandable-panel__heading button {
-  background-color: var(--f-background-heading-expandable-panel, #116a3e);
-  border: var(--f-expandable-panel-heading-border-close, none);
-  border-radius: var(--f-expandable-panel-heading-border-radius, 4px 4px 0 0);
-  color: var(--f-text-color-heading-expandable-panel, #fff);
+  background-color: var(--fkds-color-background-secondary, #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);
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
+  align-items: center;
   margin: 0;
   padding: calc(1rem * var(--f-density-factor, 1)) 1rem;
-  position: relative;
   text-align: left;
   width: 100%;
+  font-size: var(--f-font-size-large, 1.125rem);
+  font-weight: var(--f-font-weight-bold, 900);
+  line-height: var(--f-line-height-large, 1.5);
 }
 .expandable-panel__heading button:focus, .expandable-panel__heading button:hover {
-  background-color: var(--f-background-heading-expandable-panel-hover, #35805b);
+  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
+}
+.expandable-panel__title {
+  flex-grow: 1;
+  text-wrap: pretty;
+}
+.expandable-panel__title__text {
+  vertical-align: middle;
 }
 .expandable-panel__notification {
+  margin-left: 0.25em;
+  width: var(--f-icon-size-large, 1.5rem);
+  height: var(--f-icon-size-large, 1.5rem);
+  background: var(--fkds-color-feedback-background-negative-strong, #ca1515);
+  border: var(--f-border-radius-small, 2px) solid transparent;
   border-radius: 50%;
-  background-color: var(--f-icon-color-notice, #d34503);
-  border: var(--f-border-width-medium, 2px) solid var(--f-icon-color-white, #fff);
-  width: var(--f-icon-size-x-large, 2rem);
-  height: var(--f-icon-size-x-large, 2rem);
-  display: inline-block;
-  padding: 0.27rem;
-  position: absolute;
-  right: 1.5rem;
-  top: -0.75rem;
-  line-height: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+}
+@media (forced-colors: active) {
+  .expandable-panel__notification {
+    background: canvas;
+  }
 }
 .expandable-panel__notification svg {
-  color: var(--f-icon-color-white, #fff);
-  height: auto;
-  width: auto;
+  color: var(--fkds-color-text-inverted, #fff);
+  width: var(--f-icon-size-small, 1rem);
+  height: var(--f-icon-size-small, 1rem);
+}
+@media (forced-colors: active) {
+  .expandable-panel__notification svg {
+    color: buttonText;
+  }
 }
 .expandable-panel__content {
   height: 0;
@@ -2772,11 +2780,12 @@ input[type=search]:focus,
   transition: height var(--f-animation-duration-medium, 350ms) ease-in;
 }
 .expandable-panel__body {
-  background-color: var(--f-background-expandable-panel, #fff);
-  border: var(--f-border-width-medium, 2px) solid var(--f-border-color-panel, #e7f0e9);
+  background-color: var(--fkds-color-background-primary, #fff);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   border-top: 0;
+  border-radius: 0 0 var(--f-border-radius-medium, 4px) var(--f-border-radius-medium, 4px);
   line-height: inherit;
-  padding: calc(1.5rem * var(--f-density-factor, 1)) 1.5rem;
+  padding: calc(1rem * var(--f-density-factor, 1)) 1rem;
 }
 
 .expandable-paragraph {
@@ -4516,6 +4525,61 @@ input[type=search]:focus,
   padding-right: 1rem;
 }
 
+.paginator {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  container-type: inline-size;
+}
+.paginator__icon {
+  align-items: center;
+}
+.paginator__page, .paginator__previous, .paginator__next {
+  border: none;
+  color: black;
+  height: 2.5rem;
+  background-color: transparent;
+  padding: 0.25rem;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.paginator__page--active, .paginator__previous--active, .paginator__next--active {
+  color: white;
+  background-color: var(--fkds-color-action-background-primary-default, #4a52b6);
+}
+.paginator__page:hover:enabled:not(.paginator__page--active, .paginator__previous--active, .paginator__next--active), .paginator__previous:hover:enabled:not(.paginator__page--active, .paginator__previous--active, .paginator__next--active), .paginator__next:hover:enabled:not(.paginator__page--active, .paginator__previous--active, .paginator__next--active) {
+  color: black;
+  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
+}
+.paginator__next, .paginator__previous {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+.paginator__page {
+  width: 2.5rem;
+  display: none;
+}
+.paginator__next, .paginator__page-counter, .paginator__previous {
+  width: 8rem;
+}
+.paginator__page-counter {
+  padding: 0.25rem;
+  text-align: center;
+  color: var(--fkds-color-text-primary, #1b1e23);
+}
+@container (width >= 43.5rem) {
+  .paginator__page-counter {
+    display: none;
+  }
+  .paginator__page {
+    display: inline-block;
+  }
+}
+
 .progress {
   background-color: var(--fkds-color-background-primary, #fff);
   border-radius: var(--f-border-radius-medium, 4px);
@@ -5088,7 +5152,6 @@ input[type=search]:focus,
 }
 .table__button .button__icon {
   margin: var(--f-button-tertiary-table-column-action-icon-margin, 0 8px 0 2px);
-  transform: translate(0, 10%);
   height: 14px;
   width: 14px;
 }
@@ -5124,11 +5187,13 @@ input[type=search]:focus,
 .table-ng thead th:last-child {
   border-right: none;
 }
-.table-ng tbody .table-ng__row {
+.table-ng tbody .table-ng__row,
+.table-ng tfoot .table-ng__row {
   background: var(--fkds-color-background-primary, #fff);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
-.table-ng tbody .table-ng__row--empty {
+.table-ng tbody .table-ng__row--empty,
+.table-ng tfoot .table-ng__row--empty {
   text-align: center;
 }
 .table-ng__column__description {
@@ -5212,6 +5277,14 @@ input[type=search]:focus,
   font-weight: var(--f-font-weight-medium, 700);
   text-align: left;
 }
+.table-ng__cell--custom {
+  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
+  border: 2px solid transparent;
+}
+.table-ng__cell--custom:focus {
+  box-shadow: none;
+  border: 2px solid var(--f-color-focus, #1b1e23);
+}
 
 .table-ng__textedit {
   flex: 0 1 0;
@@ -5242,15 +5315,6 @@ input[type=search]:focus,
   flex: none;
 }
 
-.table-ng__custom-expandable {
-  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
-  border: 2px solid transparent;
-}
-.table-ng__custom-expandable:focus {
-  box-shadow: none;
-  border: 2px solid var(--f-color-focus, #1b1e23);
-}
-
 .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);
 }