@moneyforward/mfui-components 3.29.1 → 3.31.1

package/dist/styles.css

@@ -229,9 +229,13 @@
   --mfui-colors-mfui\.color\.selected\.border\.none: #2e72d8ff;
   --mfui-colors-mfui\.color\.selected\.border\.hovered: #0d57b1ff;
   --mfui-colors-mfui\.color\.selected\.border\.pressed: #003e90ff;
-                --mfui-colors-mfui\.color\.signal-green\.content\.none: #008644ff;
+  --mfui-colors-mfui\.color\.selected\.text-on-background\.none: #165cb7ff;
+  --mfui-colors-mfui\.color\.selected\.text-on-background\.hovered: #004396ff;
+  --mfui-colors-mfui\.color\.selected\.text-on-background\.pressed: #072977ff;
+          --mfui-colors-mfui\.color\.signal-green\.content\.none: #008644ff;
                   --mfui-colors-mfui\.color\.signal-green\.sub-background\.none: #b3eac0ff;
-            --mfui-colors-mfui\.color\.signal-neutral\.sub-background\.none: #f3f3f3ff;
+      --mfui-colors-mfui\.color\.signal-green\.text-on-sub-background\.none: #006d36ff;
+      --mfui-colors-mfui\.color\.signal-neutral\.sub-background\.none: #f3f3f3ff;
       --mfui-colors-mfui\.color\.signal-red\.content\.none: #d7383cff;
   --mfui-colors-mfui\.color\.signal-red\.content\.hovered: #b40d24ff;
   --mfui-colors-mfui\.color\.signal-red\.content\.pressed: #8a0017ff;
@@ -242,9 +246,11 @@
   --mfui-colors-mfui\.color\.signal-red\.background\.hovered: #b40d24ff;
   --mfui-colors-mfui\.color\.signal-red\.background\.pressed: #8a0017ff;
   --mfui-colors-mfui\.color\.signal-red\.sub-background\.none: #ffd3ccff;
-            --mfui-colors-mfui\.color\.signal-yellow\.content\.none: #8b7200ff;
+      --mfui-colors-mfui\.color\.signal-red\.text-on-sub-background\.none: #ba1828ff;
+      --mfui-colors-mfui\.color\.signal-yellow\.content\.none: #8b7200ff;
                   --mfui-colors-mfui\.color\.signal-yellow\.sub-background\.none: #f7da90ff;
-            --mfui-shadows-mfui\.elevation\.plus-1\.shadow-1: 0px 1px 1px 1px #00000033;
+      --mfui-colors-mfui\.color\.signal-yellow\.text-on-sub-background\.none: #775a01ff;
+      --mfui-shadows-mfui\.elevation\.plus-1\.shadow-1: 0px 1px 1px 1px #00000033;
   --mfui-shadows-mfui\.elevation\.plus-1\.shadow-2: 0px 2px 2px 1px #0000001a;
   --mfui-shadows-mfui\.elevation\.plus-2\.shadow-1: 0px 4px 8px 0px #00000040;
   --mfui-shadows-mfui\.elevation\.plus-2\.shadow-2: 0px 6px 16px 0px #00000033;
@@ -293,7 +299,8 @@
                                           --mfui-spacing-mfui\.layout\.grid\.scale\.vertical\.2: 48px;
       --mfui-spacing-mfui\.layout\.grid\.scale\.vertical\.0-1of6: 4px;
     --mfui-spacing-mfui\.layout\.grid\.scale\.vertical\.0-1of3: 8px;
-                                                                              --mfui-spacing-mfui\.size\.dimension\.icon\.square\.comfort: 18px;
+  --mfui-spacing-mfui\.layout\.grid\.scale\.vertical\.0-1of2: 12px;
+                                                                            --mfui-spacing-mfui\.size\.dimension\.icon\.square\.comfort: 18px;
                                                                               --mfui-spacing-mfui\.size\.padding\.icon-inline\.horizontal\.comfort: 1.75px;
             --mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort: 7px;
   --mfui-spacing-mfui\.size\.padding\.input\.horizontal\.condensed: 7px;
@@ -817,6 +824,28 @@
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
 }
 
+.mfui-eMicFf {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.mfui-hsjcaJ {
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
+  display: flex;
+  align-items: flex-start;
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+  overflow-wrap: break-word;
+}
+
+.mfui-imxNHe {
+  flex: 0 0 auto;
+  display: block;
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.condensed);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.condensed);
+  margin-top: 2px;
+}
+
 .mfui-dHwbKW {
   gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
   display: inline-flex;
@@ -2330,6 +2359,8 @@
 .mfui-hveqnu {
   border: none;
   inset-inline: auto 0;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -2542,7 +2573,7 @@
 }
 
 .mfui-fhtZXM {
-  max-height: 160px;
+  max-height: 288px;
   width: fit-content;
 }
 
@@ -3066,7 +3097,7 @@
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.none);
   padding-block: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort) - 1px);
   padding-inline: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort) - 1px);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.none);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.none);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.none);
 }
 
@@ -3080,7 +3111,7 @@
 
 .mfui-ljuOJV:is(:focus, [data-focus])[aria-current=page] {
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
@@ -3090,7 +3121,7 @@
 
 .mfui-ljuOJV:is(:hover, [data-hover])[aria-current=page] {
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
@@ -3100,7 +3131,7 @@
 
 .mfui-ljuOJV:is(:active, [data-active])[aria-current=page] {
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.pressed);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.pressed);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.pressed);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.pressed);
 }
 
@@ -5951,6 +5982,11 @@ li:last-child > .mfui-cXGJls {
   justify-content: space-between;
 }
 
+[data-mfui-collapsed="true"] .mfui-eiwAgy {
+  padding-inline: 0;
+  justify-content: center;
+}
+
 .mfui-dXVlzk {
   flex: 1 0 0;
   gap: 7px;
@@ -5959,11 +5995,18 @@ li:last-child > .mfui-cXGJls {
   min-width: 1px;
 }
 
+[data-mfui-collapsed="true"] .mfui-dXVlzk {
+  display: none;
+}
+
 .mfui-iaZfLW {
   overflow: hidden;
+  flex-shrink: 0;
+}
+
+.mfui-iaZfLW,.mfui-NBFBj {
   display: inline-flex;
   align-items: center;
-  flex-shrink: 0;
 }
 
 .mfui-eCoQhk {
@@ -5994,6 +6037,10 @@ li:last-child > .mfui-cXGJls {
   padding-block: 3px;
 }
 
+[data-mfui-collapsed="true"] .mfui-fBhmQk {
+  padding-inline: 7px;
+}
+
 .mfui-fBhmQk > .mfui-Tooltip__root {
   display: block;
 }
@@ -6005,6 +6052,10 @@ li:last-child > .mfui-cXGJls {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
+[data-mfui-collapsed="true"] .mfui-jQneDG {
+  margin-inline: 7px;
+}
+
 .mfui-hoqJKf {
   margin: 0;
   padding: 0;
@@ -6076,6 +6127,11 @@ li:last-child > .mfui-cXGJls {
   min-width: 1px;
 }
 
+[data-mfui-collapsed="true"] .mfui-jOPsct {
+  padding-inline: 0;
+  justify-content: center;
+}
+
 .mfui-iENmzA {
   overflow: hidden;
   display: flex;
@@ -6122,6 +6178,13 @@ li:last-child > .mfui-cXGJls {
   padding-right: 21px;
 }
 
+[data-mfui-collapsed="true"] .mfui-SeHWc {
+  gap: var(--mfui-spacing-mfui\.layout\.grid\.scale\.vertical\.0-1of2);
+  padding-inline: 0;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .mfui-cIxYdj {
   gap: 4px;
   padding-inline: 14px;
@@ -6221,6 +6284,15 @@ li:last-child > .mfui-cXGJls {
   border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
+.mfui-cYwDQn[data-mfui-collapsed="true"] {
+  cursor: default;
+}
+
+.mfui-cYwDQn[data-mfui-collapsed="true"]:is(:hover, [data-hover]),.mfui-cYwDQn[data-mfui-collapsed="true"]:is(:focus-visible, [data-focus-visible]),.mfui-cYwDQn[data-mfui-collapsed="true"][data-mfui-dragging] {
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+}
+
 .mfui-cYwDQn[data-mfui-dragging],.mfui-cYwDQn:is(:focus-visible, [data-focus-visible]) {
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.indicator\.width\.comfort);
   border-right-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
@@ -6231,6 +6303,40 @@ li:last-child > .mfui-cXGJls {
   border-right-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
 }
 
+.mfui-hAXLar {
+  display: block;
+  width: 100%;
+}
+
+.mfui-dgZOML {
+  gap: 3.5px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.mfui-eUJMVE {
+  white-space: nowrap;
+}
+
+.mfui-fncAeS {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+}
+
+.mfui-czdCzS {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 @media screen and (min-width: 37.5rem) {
   .mfui-hveqnu {
     width: var(--mfui-sizes-mfui\.layout\.area\.horizontal\.fixed);
@@ -6756,6 +6862,10 @@ li:last-child > .mfui-cXGJls {
   color: var(--mfui-colors-mfui\.color\.signal-yellow\.content\.none);
 }
 
+.mfui-jixFnv {
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+}
+
 .mfui-aJTup {
   border-radius: var(--mfui-radii-mfui\.size\.radius\.indicator-component\.impact);
 }
@@ -7278,6 +7388,23 @@ li:last-child > .mfui-cXGJls {
   background-color: inherit;
 }
 
+.mfui-hGAWTy {
+  border-left-style: solid;
+  border-left-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-left-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
+  border-right-style: solid;
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
+}
+
+.mfui-hGAWTy:first-child {
+  border-left-width: 0;
+}
+
+.mfui-hGAWTy:last-child {
+  border-right-width: 0;
+}
+
 .mfui-izXzGC::before {
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
@@ -7353,6 +7480,23 @@ li:last-child > .mfui-cXGJls {
   position: sticky;
 }
 
+.mfui-haQzOt {
+  border-left-style: solid;
+  border-left-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-left-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+  border-right-style: solid;
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+}
+
+.mfui-haQzOt:first-child {
+  border-left-width: 0;
+}
+
+.mfui-haQzOt:last-child {
+  border-right-width: 0;
+}
+
 .mfui-fGBQCd::before {
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
@@ -7908,17 +8052,17 @@ li:last-child > .mfui-cXGJls {
 
 .mfui-cNbYAX {
   background-color: var(--mfui-colors-mfui\.color\.signal-green\.sub-background\.none);
-  color: var(--mfui-colors-mfui\.color\.signal-green\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.signal-green\.text-on-sub-background\.none);
 }
 
 .mfui-bAfwQA {
   background-color: var(--mfui-colors-mfui\.color\.signal-red\.sub-background\.none);
-  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.signal-red\.text-on-sub-background\.none);
 }
 
 .mfui-dZGLHT {
   background-color: var(--mfui-colors-mfui\.color\.signal-yellow\.sub-background\.none);
-  color: var(--mfui-colors-mfui\.color\.signal-yellow\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.signal-yellow\.text-on-sub-background\.none);
 }
 
 .mfui-bqPyQm {