@fkui/design 6.26.0 → 6.28.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 {
@@ -4973,6 +4982,12 @@ input[type=search]:focus,
   color: var(--fkds-color-text-secondary, #5f6165);
   font-weight: var(--f-font-weight-normal, 400);
 }
+.table__column__wrapper {
+  pointer-events: none;
+}
+.table__column__wrapper > * {
+  pointer-events: auto;
+}
 .table--selectable .table__row td:hover,
 .table--selectable .table__row th:hover {
   cursor: pointer;
@@ -5082,7 +5097,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;
 }
@@ -5181,6 +5195,7 @@ input[type=search]:focus,
 .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);
+  vertical-align: middle;
 }
 .table-ng__cell--expand button, .table-ng__cell--button button {
   padding: 0;
@@ -5196,6 +5211,10 @@ input[type=search]:focus,
 }
 .table-ng__cell--expand {
   width: var(--f-icon-size-medium, 1.25rem);
+  padding: calc(0.25rem * var(--f-density-factor, 1));
+}
+.table-ng__cell--select {
+  width: var(--f-icon-size-medium, 1.25rem);
 }
 .table-ng__cell--rowheader {
   font-weight: var(--f-font-weight-medium, 700);
@@ -5259,13 +5278,14 @@ input[type=search]:focus,
   border-bottom: 2px solid var(--f-color-focus, #1b1e23);
   border-right: 1px solid var(--f-color-focus, #1b1e23);
 }
-.table-ng__column--checkbox {
+.table-ng__column--select {
   text-align: center;
   padding: calc(0.25rem * var(--f-density-factor, 1));
 }
-.table-ng__column--checkbox input {
+.table-ng__column--select input {
   height: var(--f-icon-size-medium, 1.25rem);
   width: var(--f-icon-size-medium, 1.25rem);
+  vertical-align: middle;
 }
 .table-ng__column--rowheader {
   text-align: left;