@moneyforward/mfui-components 3.21.0 → 3.23.0

package/dist/styles.css

@@ -253,12 +253,14 @@
   --mfui-sizes-mfui\.layout\.area\.horizontal\.fixed: 588px;
   --mfui-sizes-mfui\.layout\.area\.vertical\.global-header: 48px;
       --mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.1: 14px;
-                                        --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1: 24px;
-  --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.2: 48px;
-  --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.3: 72px;
-    --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of6: 4px;
-    --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of3: 8px;
-              --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1-1of4: 30px;
+  --mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.2: 28px;
+                  --mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.0-1of4: 3.5px;
+  --mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.0-1of2: 7px;
+                  --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1: 24px;
+    --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.3: 72px;
+        --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of3: 8px;
+  --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of2: 12px;
+            --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1-1of4: 30px;
           --mfui-sizes-mfui\.layout\.safe-area\.edge\.horizontal: 49px;
   --mfui-sizes-mfui\.layout\.safe-area\.edge\.vertical: 48px;
               --mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort: 32px;
@@ -287,13 +289,12 @@
       --mfui-sizes-mfui\.size\.target\.button\.comfort: 56px;
   --mfui-sizes-mfui\.size\.target\.button\.condensed: 42px;
   --mfui-sizes-mfui\.size\.target\.button\.impact: 56px;
-              --mfui-border-widths-mfui\.size\.border\.base\.width\.comfort: 1px;
-  --mfui-border-widths-mfui\.size\.border\.base\.width\.condensed: 1px;
-  --mfui-border-widths-mfui\.size\.border\.base\.width\.impact: 1px;
-  --mfui-border-widths-mfui\.size\.border\.indicator\.width\.comfort: 2px;
-      --mfui-border-widths-mfui\.size\.border\.current\.width\.comfort: 3px;
-      --mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort: 2px;
-            --mfui-spacing-mfui\.size\.padding\.icon-inline\.horizontal\.comfort: 1.75px;
+                  --mfui-spacing-mfui\.layout\.grid\.scale\.horizontal\.1: 14px;
+                                          --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\.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;
   --mfui-spacing-mfui\.size\.padding\.input\.horizontal\.impact: 7px;
@@ -340,7 +341,13 @@
             --mfui-spacing-mfui\.size\.spacing\.container\.vertical\.comfort: 12px;
       --mfui-spacing-mfui\.size\.spacing\.paragraph\.horizontal\.comfort: 14px;
       --mfui-spacing-mfui\.size\.spacing\.paragraph\.vertical\.comfort: 24px;
-                  --mfui-radii-mfui\.size\.radius\.indicator-component\.comfort: 3px;
+                  --mfui-border-widths-mfui\.size\.border\.base\.width\.comfort: 1px;
+  --mfui-border-widths-mfui\.size\.border\.base\.width\.condensed: 1px;
+  --mfui-border-widths-mfui\.size\.border\.base\.width\.impact: 1px;
+  --mfui-border-widths-mfui\.size\.border\.indicator\.width\.comfort: 2px;
+      --mfui-border-widths-mfui\.size\.border\.current\.width\.comfort: 3px;
+      --mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort: 2px;
+            --mfui-radii-mfui\.size\.radius\.indicator-component\.comfort: 3px;
   --mfui-radii-mfui\.size\.radius\.indicator-component\.condensed: 3px;
   --mfui-radii-mfui\.size\.radius\.indicator-component\.impact: 3px;
   --mfui-radii-mfui\.size\.radius\.control-component\.comfort: 6px;
@@ -478,8 +485,8 @@
 .mfui-dOaOSF {
   margin: 0;
   list-style: none;
-  padding-inline: var(--mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.1);
-  padding-block: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of6);
+  padding-inline: var(--mfui-spacing-mfui\.layout\.grid\.scale\.horizontal\.1);
+  padding-block: var(--mfui-spacing-mfui\.layout\.grid\.scale\.vertical\.0-1of6);
   display: flex;
   align-items: center;
 }
@@ -1862,7 +1869,7 @@
   border-bottom: 1px solid;
   border-color: var(--mfui-colors-mfui\.color\.dark-accent\.border\.none);
   display: flex;
-  padding-block-start: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.2);
+  padding-block-start: var(--mfui-spacing-mfui\.layout\.grid\.scale\.vertical\.2);
   padding-block-end: calc(var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of3) - 1px);
 }
 
@@ -2220,8 +2227,8 @@
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
   border-bottom: 1px solid;
   border-color: var(--mfui-colors-mfui\.color\.dark-accent\.border\.none);
-  padding-block-start: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.2);
-  padding-block-end: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of3);
+  padding-block-start: var(--mfui-spacing-mfui\.layout\.grid\.scale\.vertical\.2);
+  padding-block-end: var(--mfui-spacing-mfui\.layout\.grid\.scale\.vertical\.0-1of3);
 }
 
 .mfui-gkzbmJ {
@@ -3185,6 +3192,78 @@
   display: flex;
 }
 
+.mfui-cIAdkA {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  padding-inline: var(--mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.1);
+  padding-block: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of2);
+  gap: var(--mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.0-1of2);
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 0;
+}
+
+.mfui-gDjnxP {
+  flex: 1 0 0;
+  gap: var(--mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.0-1of4);
+  display: flex;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.mfui-gDjnxP[data-mfui-is-last="true"] {
+  flex: 0 0 auto;
+}
+
+.mfui-bbdYwH {
+  background: transparent;
+  border: none;
+  padding: 0;
+  gap: var(--mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.0-1of4);
+  text-decoration: none;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.mfui-lpeRCr {
+  border-radius: 999px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-family: var(--mfui-fonts-mfui\.typography\.font-family\.body);
+  font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.body);
+  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.body);
+  line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.body);
+  width: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1);
+  height: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1);
+}
+
+.mfui-bhHyAU {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+}
+
+.mfui-kNeRhx {
+  flex: 1 0 0;
+  display: flex;
+  align-items: center;
+  min-width: var(--mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.2);
+  height: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1);
+}
+
+.mfui-kNeRhx::before {
+  content: "";
+  display: block;
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+  width: 100%;
+  height: 2px;
+}
+
 .mfui-dXrnGz {
   pointer-events: auto;
 }
@@ -4859,7 +4938,7 @@
 }
 
 .mfui-ueqvR[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-date-picker-display-value"] {
-  padding-right: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  padding-right: var(--mfui-spacing-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
 .mfui-ueqvR:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
@@ -4994,7 +5073,7 @@
 }
 
 .mfui-lbAdvC[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-date-range-picker-display-value"] {
-  padding-right: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  padding-right: var(--mfui-spacing-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
 .mfui-lbAdvC:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
@@ -5133,7 +5212,7 @@
 }
 
 .mfui-ejNqZV[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-month-picker-display-value"] {
-  padding-right: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  padding-right: var(--mfui-spacing-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
 .mfui-ejNqZV:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
@@ -5268,7 +5347,7 @@
 }
 
 .mfui-kCMNjq[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-month-range-picker-display-value"] {
-  padding-right: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  padding-right: var(--mfui-spacing-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
 .mfui-kCMNjq:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
@@ -7103,6 +7182,77 @@ li:last-child > .mfui-cXGJls {
   padding-left: calc(21px + var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort));
 }
 
+.mfui-dXYzWg {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+.mfui-gOjINY {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.none);
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+}
+
+.mfui-cPHzFG::before {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+}
+
+.mfui-cQALOA {
+  gap: var(--mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.0-1of2);
+  position: relative;
+  padding-bottom: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1);
+}
+
+.mfui-cQALOA[data-mfui-is-last="true"] [data-mfui-stepper-slot="label"] {
+  width: max-content;
+}
+
+.mfui-eNPtBk {
+  position: static;
+}
+
+.mfui-bCbxBn {
+  position: absolute;
+  transform: translateX(-50%);
+  text-align: center;
+  overflow-wrap: anywhere;
+  top: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1);
+  left: calc(var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1) / 2);
+  width: 100%;
+}
+
+.mfui-knbvZN {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
+  font-family: var(--mfui-fonts-mfui\.typography\.font-family\.strong-body);
+  font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.strong-body);
+  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.strong-body);
+  line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.strong-body);
+}
+
+.mfui-gusFHT::before {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+}
+
+.mfui-gKWiaA {
+  color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
+}
+
+.mfui-gKWiaA,.mfui-cqtCKi::before {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.none);
+}
+
+.mfui-iSHnWO {
+  cursor: pointer;
+}
+
+.mfui-iSHnWO:is(:focus-visible, [data-focus-visible]) > [data-mfui-stepper-slot="label"],.mfui-iSHnWO:is(:hover, [data-hover]) > [data-mfui-stepper-slot="label"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-iSHnWO:is(:active, [data-active]) > [data-mfui-stepper-slot="label"] {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
 .mfui-dCDSru[data-mfui-group-label="true"]:not(:first-child) {
   border: none;
   border-top: 1px solid;
@@ -7841,13 +7991,8 @@ li:last-child > .mfui-cXGJls {
   border-bottom: none;
 }
 
-.mfui-jAKHYi {
-  position: fixed;
-  left: 0;
-  right: 0;
-}
-
-.mfui-jAKHYi,.mfui-erGtCj {
+.mfui-erGtCj {
+  position: sticky;
   z-index: 1;
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
   bottom: 0;
@@ -7856,10 +8001,6 @@ li:last-child > .mfui-cXGJls {
   border-top-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
-.mfui-erGtCj {
-  position: sticky;
-}
-
 .mfui-hhFgaB {
   max-width: var(--mfui-sizes-mfui\.layout\.area\.horizontal\.fixed);
   width: 100%;
@@ -8122,6 +8263,18 @@ li:last-child > .mfui-cXGJls {
   box-shadow: none;
 }
 
+.mfui-dQaVox:hover > [data-mfui-stepper-slot="indicator"],.mfui-dQaVox:focus-visible > [data-mfui-stepper-slot="indicator"] {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.hovered);
+}
+
+.mfui-rDETK:hover > [data-mfui-stepper-slot="indicator"],.mfui-rDETK:focus-visible > [data-mfui-stepper-slot="indicator"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.hovered);
+}
+
+.mfui-hHaBzk:hover > [data-mfui-stepper-slot="indicator"],.mfui-hHaBzk:focus-visible > [data-mfui-stepper-slot="indicator"] {
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.hovered);
+}
+
 .group:is(:hover, [data-hover]) .mfui-djOzRV {
   border-color: var(--mfui-colors-mfui\.color\.base\.inverted-border\.hovered);
 }
@@ -8138,6 +8291,18 @@ li:last-child > .mfui-cXGJls {
   border-color: var(--mfui-colors-mfui\.color\.base\.inverted-border\.none);
 }
 
+.mfui-gwWULN:active > [data-mfui-stepper-slot="indicator"] {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.pressed);
+}
+
+.mfui-hlGeri:active > [data-mfui-stepper-slot="indicator"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.pressed);
+}
+
+.mfui-dTOTII:active > [data-mfui-stepper-slot="indicator"] {
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.pressed);
+}
+
 .mfui-iAQdxu:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
   border-color: var(--mfui-colors-mfui\.color\.signal-red\.border\.hovered);
 }