@moneyforward/mfui-components 3.29.1 → 3.30.0

package/dist/styled-system/recipes/sidebar-slot-recipe.js

@@ -19,6 +19,10 @@ const sidebarSlotRecipeSlotNames = [
         "logo",
         "Sidebar__logo"
     ],
+    [
+        "rightPane",
+        "Sidebar__rightPane"
+    ],
     [
         "navigationWrapper",
         "Sidebar__navigationWrapper"

package/dist/styles.css

@@ -293,7 +293,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;
@@ -5951,6 +5952,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 +5965,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 +6007,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 +6022,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 +6097,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 +6148,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 +6254,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 +6273,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 +6832,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);
 }