@moneyforward/mfui-components 3.0.0 → 3.2.0

package/dist/styles.css

@@ -202,7 +202,9 @@
   --mfui-colors-mfui\.color\.neutral\.thin-border\.hovered: #ddddddff;
   --mfui-colors-mfui\.color\.neutral\.thin-border\.pressed: #d1d1d1ff;
   --mfui-colors-mfui\.color\.primary\.content\.none: #2e72d8ff;
-      --mfui-colors-mfui\.color\.primary\.border\.none: #2e72d8ff;
+  --mfui-colors-mfui\.color\.primary\.content\.hovered: #0d57b1ff;
+  --mfui-colors-mfui\.color\.primary\.content\.pressed: #003e90ff;
+  --mfui-colors-mfui\.color\.primary\.border\.none: #2e72d8ff;
       --mfui-colors-mfui\.color\.primary\.background\.none: #2e72d8ff;
   --mfui-colors-mfui\.color\.primary\.background\.hovered: #0d57b1ff;
   --mfui-colors-mfui\.color\.primary\.background\.pressed: #003e90ff;
@@ -271,7 +273,11 @@
       --mfui-sizes-mfui\.size\.dimension\.month-calendar-cell\.width\.comfort: 49px;
       --mfui-sizes-mfui\.size\.dimension\.month-calendar-cell\.height\.comfort: 48px;
             --mfui-sizes-mfui\.size\.dimension\.this-month-indicator\.diameter\.comfort: 42px;
-                                                --mfui-sizes-mfui\.size\.target\.minimum\.comfort: 24px;
+            --mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.width\.comfort: 44px;
+      --mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.height\.comfort: 24px;
+      --mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort: 20px;
+      --mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort: 18px;
+                  --mfui-sizes-mfui\.size\.target\.minimum\.comfort: 24px;
       --mfui-sizes-mfui\.size\.target\.button\.comfort: 56px;
   --mfui-sizes-mfui\.size\.target\.button\.condensed: 42px;
   --mfui-sizes-mfui\.size\.target\.button\.impact: 56px;
@@ -337,7 +343,8 @@
   --mfui-radii-mfui\.size\.radius\.panel-component\.comfort: 12px;
       --mfui-radii-mfui\.size\.radius\.floating-component\.comfort: 18px;
       --mfui-radii-mfui\.size\.radius\.floating-pane\.comfort: 24px;
-            --mfui-fonts-mfui\.typography\.font-family\.page-heading-1: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
+      --mfui-radii-mfui\.size\.radius\.toggle-switch-handle\.comfort: 12px;
+      --mfui-fonts-mfui\.typography\.font-family\.page-heading-1: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
     --mfui-fonts-mfui\.typography\.font-family\.page-heading-2: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
     --mfui-fonts-mfui\.typography\.font-family\.section-heading-1: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
     --mfui-fonts-mfui\.typography\.font-family\.section-heading-2: Meiryo,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
@@ -868,6 +875,12 @@
   cursor: not-allowed;
 }
 
+.mfui-kKZmYK {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .mfui-iEqIyl {
   margin: 0;
   text-decoration: none;
@@ -1517,6 +1530,44 @@
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
 }
 
+.mfui-etcyoB {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.control\.horizontal\.comfort);
+  padding-block: 4px;
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mfui-kxqjkG {
+  gap: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.mfui-cUaWtj {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.mfui-dygFHu {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-kXRJmn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+}
+
+.mfui-kXRJmn .mfui-ProgressIndicator {
+  width: 16px;
+  height: 16px;
+}
+
 .mfui-bZAucV {
   position: relative;
   display: flex;
@@ -3738,14 +3789,13 @@
 .mfui-bfIsQV {
   border: 1px solid;
   gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
-  padding-block: calc(4px - 1px);
+  padding-block: 0;
   padding-inline: var(--mfui-spacing-mfui\.size\.spacing\.inline\.horizontal\.comfort);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
   display: flex;
   align-items: center;
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
-  min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
 }
 
 .mfui-bfIsQV:is(:focus-visible, [data-focus-visible]) {
@@ -4766,6 +4816,156 @@
   border-left-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
 }
 
+.mfui-hRFDZx {
+  border-radius: var(--mfui-radii-mfui\.size\.radius\.toggle-switch-handle\.comfort);
+  transition: background-color 0.1s linear, border-color 0.1s linear;
+  display: inline-flex;
+  position: relative;
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.width\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.height\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)) {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.none);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)):is(:hover, [data-hover]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)):is(:hover, [data-hover]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)):is(:active, [data-active]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)):is(:active, [data-active]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled)) [data-mfui-content="toggle-handle"] {
+  transform: translateY(-50%) translateX(0);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked) {
+  border-width: 0;
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.none);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked) [data-mfui-content="toggle-handle"] {
+  transform: translateY(-50%) translateX(calc(var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.width\.comfort) - var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort) - 4px));
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked):is(:hover, [data-hover]) {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked):is(:hover, [data-hover]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked):is(:active, [data-active]) {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):checked):is(:active, [data-active]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:disabled) {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--mfui-colors-mfui\.color\.disabled\.border);
+  background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:disabled) [data-mfui-content="toggle-handle"] {
+  transform: translateY(-50%) translateX(0);
+  background-color: var(--mfui-colors-mfui\.color\.disabled\.content);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-off\.diameter\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:disabled:checked) {
+  border-width: 0;
+  background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:disabled:checked) [data-mfui-content="toggle-handle"] {
+  transform: translateY(-50%) translateX(calc(var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-container\.width\.comfort) - var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort) - 4px));
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.toggle-switch-handle-on\.diameter\.comfort);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible):is(:active, [data-active]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible):is(:active, [data-active]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.content\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible:checked) {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible:checked) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible:checked):is(:active, [data-active]) {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.content\.pressed);
+}
+
+.mfui-hRFDZx:has(input[type="checkbox"][role="switch"]:not(:disabled):focus-visible:checked):is(:active, [data-active]) [data-mfui-content="toggle-handle"] {
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
+}
+
+.mfui-ikFLrp {
+  margin: 0;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+
+.mfui-ikFLrp:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  cursor: not-allowed;
+}
+
+.mfui-fcwQxJ {
+  border-radius: 50%;
+  transition: transform 0.1s linear, background-color 0.1s linear, width 0.1s linear, height 0.1s linear;
+  position: absolute;
+  top: 50%;
+  left: 2px;
+}
+
 @media screen and (min-width: 37.5rem) {
   .mfui-hveqnu {
     width: var(--mfui-sizes-mfui\.layout\.area\.horizontal\.fixed);
@@ -4783,6 +4983,16 @@
 }
 
 @media screen and (max-width: 37.4975rem) {
+  .mfui-kKZmYK > button,.mfui-kKZmYK > a {
+    border-radius: 0;
+    align-self: stretch;
+    box-sizing: border-box;
+    width: 32px;
+    height: 100%;
+}
+  .mfui-eaWFxK[data-mfui-has-clear-button="true"] > [data-mfui-content="select-box-trigger-display-value"] {
+    padding-right: 32px;
+}
   .mfui-cLkjup {
     gap: 0;
     flex-direction: column;
@@ -4794,6 +5004,13 @@
 }
   .mfui-fOVWuV,.mfui-eeUwUZ {
     display: none;
+}
+  .mfui-dJSysX,.mfui-jCnbql {
+    width: 32px;
+    height: 32px;
+}
+  .mfui-fKGEVz[data-mfui-has-clear-button="true"] > [data-mfui-content="filter-trigger-display-value"] {
+    padding-right: 32px;
 }
 }
 
@@ -5357,7 +5574,7 @@
 }
 
 .mfui-pYbRG {
-  padding-block: calc(4px - 1px);
+  padding-block: 0;
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.comfort);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
   border-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
@@ -5393,7 +5610,7 @@
 }
 
 .mfui-dgiHoK {
-  padding-block: calc(12px - 1px);
+  padding-block: 0;
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.impact);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.impact);
   border-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.impact);
@@ -5457,6 +5674,19 @@
   min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.condensed);
 }
 
+.mfui-iOuOfJ {
+  padding-inline: calc(var(--mfui-spacing-mfui\.size\.padding\.input\.horizontal\.impact) - 1px);
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.impact);
+  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.impact);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.impact);
+  min-width: var(--mfui-sizes-mfui\.size\.target\.button\.impact);
+}
+
+.mfui-iOuOfJ > svg {
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
 .mfui-ctWvwW[data-mfui-group-label="true"]:not(:first-child) {
   border: none;
   border-top: 1px solid;
@@ -5865,24 +6095,22 @@
 }
 
 .mfui-cIEpCk::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: calc(100% + 1px);
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
   border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
-.mfui-hUucnT::before {
+.mfui-cIEpCk::before,.mfui-hUucnT::before {
   content: "";
   position: absolute;
+  pointer-events: none;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100% + 1px);
+}
+
+.mfui-hUucnT::before {
   border-left-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-left-style: solid;
   border-left-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
@@ -5942,24 +6170,22 @@
 }
 
 .mfui-krlGLX::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: calc(100% + 1px);
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
   border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
-.mfui-iRKnkw::before {
+.mfui-krlGLX::before,.mfui-iRKnkw::before {
   content: "";
   position: absolute;
+  pointer-events: none;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100% + 1px);
+}
+
+.mfui-iRKnkw::before {
   border-left-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-left-style: solid;
   border-left-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
@@ -6353,7 +6579,6 @@
 }
 
 .mfui-hkNPlg {
-  padding-block: 0;
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.condensed);
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.condensed);
 }
@@ -6368,7 +6593,6 @@
 }
 
 .mfui-egyfZK {
-  padding-block: calc(4px - 1px);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
 }
@@ -6383,7 +6607,6 @@
 }
 
 .mfui-kEKma {
-  padding-block: calc(12px - 1px);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.impact);
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.impact);
 }
@@ -6861,6 +7084,15 @@
 }
   .mfui-chYhcn {
     display: none;
+}
+  .mfui-bhqKGD {
+    height: calc(var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort) - 2px);
+}
+  .mfui-cVdOLL {
+    height: calc(var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.condensed) - 2px);
+}
+  .mfui-dINjxp {
+    height: calc(var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.impact) - 2px);
 }
   .mfui-euqku {
     font-family: var(--mfui-fonts-mfui\.typography\.font-family\.input\.narrow);